对于RN新手来说,这里面的很多知识点可能会让你觉得很绕。就导航栏来说,就会让你觉得有点不适应,因为创建了一个新项目之后,导航栏的一些组件并不包括在创建好的项目中,只能在后面再进行安装。接下来,我会出RN导航栏的文章一二三。
此导航栏适用于安卓、苹果。
第一步,安装相应的组件:
在React Native项目中安装所需的软件包(根据自己的系统进行选择命令):
npm install @react-navigation/native
yarn add @react-navigation/native
接着还需要安装一个依赖到项目中:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
要完成安装react-native-gesture-handler,请在你的条目文件的顶部(确保位于顶部,并且没有其他内容)添加以下内容,例如index.js或App.js:
import 'react-native-gesture-handler';
接着安装堆栈导航器库:
npm install @react-navigation/stack
yarn add @react-navigation/stack
好了,以上就是需要安装的内容,接下来我就给个简单示例:
import 'react-native-gesture-handler';
import React, {
Component } from 'react';
import {
NavigationContainer } from '@react-navigation/native';
import {
createStackNavigator } from '@react-navigation/stack';
import Home from './src/Home';
const Stack = createStackNavigator();
export default class App extends Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="首页" component={
Home} />
</Stack.Navigator>
</NavigationContainer>
)
};
};
上面就是一个最简单的带头部导航的页面,后面我将写页面之间的跳转,更复杂的一些导航。