1. Introduction:

= = = = = =

  • React Native version: 0.64
  • Redux: An official recommended global data management component. The saved data will be destroyed in two cases: when the APP is killed by the system or actively killed, and when the phone is restarted.
  • React Navigation: Official recommended route and bottom menu bar implementation
  • Axios: An officially recommended HTTP request library
  • React Native Element: One of the most starred UI libraries on Github today
  1. Refer to the installation and documentation addresses of basic components

= = = = = = = = = = = = = = = = =

2.1 Installing React Native Elements UI components

  • The installation
yarn add react-native-elements
yarn add react-native-vector-icons
npx react-native link react-native-vector-icons
yarn add react-native-safe-area-context
react-native link react-native-safe-area-context

Copy the code
  • The official document reference reactnativeelements.com/docs/input

react-native-elements.js.org/#/input

2.2 Route and the bottom menu bar React Navigation

  • The installation
npm install @react-navigation/bottom-tabs

Copy the code
  • Reference reactnavigation.org/docs/tab-ba…

2.3 redux

  • Reference cn.redux.js.org/

The key file

App.js entry file

  • Redux global Store binding
import 'react-native-gesture-handler'; Import * as react from 'react'; // import { View } from 'react-native'; import {View} from './src/components/Themed'; import Navigation from './src/navigator'; import { Provider } from 'react-redux'; import store from './src/redux/store'; const App = () => { return ( <View style={{ flex: 1 }}> <Provider store={store}> <Navigation /> </Provider> </View> ); }; export default App;Copy the code

Configuration of page routing, entry, and following system topics

  • src\navigator\index.js
*/ import * as React from 'React '; import { useColorScheme } from 'react-native'; Import {createStackNavigator} from '@react-navigation/stack'; // The bottom menu bar theme reference:  https://reactnavigation.org/docs/themes/#basic-usage import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native'; import BTN from './bottomTabNavigator'; import LoginScreen from '.. /pages/login'; import DetailScreen from './detailScreen'; import SearchScreen from '.. /pages/common/search'; import { ThemeProvider } from 'react-native-elements'; // React Native Element theme: Const reference https://reactnativeelements.com/docs/customization / / create the page Stack Stack = createStackNavigator (); Const ColorScheme = useColorScheme(); const ColorScheme = useColorScheme(); // Change the background color of the bottom menu bar to white const lightTheme = {... DefaultTheme, colors: { ... DefaultTheme.colors, background: '#fff' } }; return ( <ThemeProvider useDark={ColorScheme === 'dark'}> <NavigationContainer theme={ColorScheme === 'dark' ? DarkTheme : lightTheme}> <Stack.Navigator initialRoute> <Stack.Screen component={LoginScreen} options={{ title: <Stack.Screen Component ={BTN} options={{title: 'home ', headerShown: false}} /> < stack. Screen Component ={BTN} options={{title:' home ', headerShown: false}} /> False}} /> < stack.screen Component ={DetailScreen} /> {/* search page */} < stack.screen options={{headerShown: false }} component={SearchScreen} /> </Stack.Navigator> </NavigationContainer> </ThemeProvider> ); } export default App;Copy the code

Github repository address

Github.com/weijintao92…