ReactNative入门（二）——导航和路由

React Navigation官方文档：https://reactnavigation.org/docs/getting-started/

安装react-navigation：

npm install @react-navigation/native
1

或

npx yarn add @react-navigation/native
1

安装react-native-screens和react-native-safe-area-context：

npm install react-native-screens react-native-safe-area-context
1

或

npx yarn add react-native-screens react-native-safe-area-context
1

安装native stack：

npx yarn add @react-navigation/native-stack
1

使用方法：

创建ui文件夹，并创建两个页面PageOne和PageTwo以测试跳转：

修改APP.js:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import PageOne from './ui/PageOne';
import PageTwo from './ui/PageTwo';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PageOne" component={PageOne} />
        <Stack.Screen name="PageTwo" component={PageTwo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

PageOne.js:

import React from "react";
import {
    SafeAreaView,
    StatusBar,
    StyleSheet,
    Text,
    View,
} from 'react-native';

export default class PageOne extends React.Component {

    constructor(props) {
        super(props);
    }

    toPageTwo() {
        this.props.navigation.navigate('PageTwo');
    }

    render() {
        return (
            <SafeAreaView>
                <StatusBar barStyle='dark-content' backgroundColor='#fff' />
                <View style={styles.container}>
                    <Text style={{ color: '#000', fontSize: 30, fontWeight: 'bold' }} onPress={() => this.toPageTwo()}>PageOne</Text>
                </View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        height: '100%',
        width: '100%'
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

PageTwo.js:

import React from "react";
import {
    SafeAreaView,
    StatusBar,
    StyleSheet,
    Text,
    View,
} from 'react-native';

export default class PageTwo extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <SafeAreaView>
                <StatusBar barStyle='dark-content' backgroundColor='#fff' />
                <View style={styles.container}>
                    <Text style={{ color: '#000', fontSize: 30, fontWeight: 'bold' }}>PageTwo</Text>
                </View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        height: '100%',
        width: '100%'
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

跳转主要方法：

this.props.navigation.navigate('PageTwo');
1

‘PageTwo’ 即你在App.js中的Stack.Screen中定义的name！

传参：

 this.props.navigation.navigate('PageTwo',{'data':'test'});
1

目标页面通过props.route.params接收：

    constructor(props) {
        super(props);
        console.log("props>>" + JSON.stringify(props));
        console.log("data>>" + props.route.params.data);
    }
1
2
3
4
5

考虑到你可能要自定义导航栏，希望隐藏默认导航栏，这当然可以实现，只需要隐藏导航栏即可：

<Stack.Screen name="PageOne" component={PageOne} options={{ headerShown: false }} />
<Stack.Screen name="PageTwo" component={PageTwo} options={{ headerShown: false }} />
1
2

如果你需要底部bottomTab，你可以安装 @react-navigation/bottom-tabs：

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12

当然，它是支持图标自定义的，包括使用bottomTab时页面路由配置，官方文档上都是非常详细的了：
https://reactnavigation.org/docs/tab-based-navigation