阅读 202

react native 集成 redux、react navigation、axios、react native element 的一个 demo

1. 前言:

======

  • react native 版本:0.64
  • redux: 官方推荐的全局数据管理的组件。保存的数据会在以下 2 个情况被销毁:APP 被系统杀死或主动被杀死、手机重启。
  • react navigation: 官方推荐的路由及底部菜单栏实现
  • axios:官方推荐的一个 http 请求库
  • react native element:一个目前在 github 星星数量最多的一个 UI 库
  1. 基础组件的安装及文档参考地址

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

2.1 React Native Elements UI组件的安装

  • 安装
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

复制代码

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

2.2 路由及底部菜单栏 React Navigation

  • 安装
npm install @react-navigation/bottom-tabs

复制代码

2.3 redux

关键文件

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;


复制代码

github 仓库地址

github.com/weijintao92…

文章分类
前端