1. 前言：

======

react native 版本：0.64
redux：官方推荐的全局数据管理的组件。保存的数据会在以下 2 个情况被销毁：APP 被杀死、手机重启。
react navigation：官方推荐的路由及底部菜单栏实现
axios：官方推荐的一个 http 请求库
react native element：一个目前在 github 星星数量最多的一个 UI 库

基础组件的安装及文档参考地址

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

2.1 React Native Elements

安装

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

复制代码

参考
reactnativeelements.com/docs/input

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

2.2 路由及底部菜单栏 React Navigation

安装

npm install @react-navigation/bottom-tabs

复制代码

参考 reactnavigation.org/docs/tab-ba…

2.3 redux

参考 cn.redux.js.org/

关键文件

app.js 入口文件

redux 全局 store 的绑定

import 'react-native-gesture-handler'; // react navigation的必要配置
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;


复制代码

页面路由、入口、跟随系统主题的配置

src\navigator\index.js

/**
 * 页面路由、入口、跟随系统主题
 */
import * as React from 'react';
import { useColorScheme } from 'react-native';  //获取系统当前主题
import { createStackNavigator } from '@react-navigation/stack';
// 底部菜单栏主题参考： 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 主题配置：参考https://reactnativeelements.com/docs/customization

//创建页面栈
const Stack = createStackNavigator();

function App() {
  //获取系统配色
  const ColorScheme = useColorScheme();
  //修改底部菜单栏背景颜色为白色
  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: '登录', headerShown: false }}
          />
          <Stack.Screen
            
            component={BTN}
            options={{ title: '首页', headerShown: false }}
          />

          <Stack.Screen  component={DetailScreen} />

          {/* 搜索页面 */}
          <Stack.Screen  options={{ headerShown: false }} component={SearchScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  );
}

export default App;


复制代码