ReactNative-Navigator

Posted 2022-07-09 qq59caeb714a7a4

Navigator的基本使用

Navigator 是什么？

   一个导航组件

    进入下一个界面，返回上一个界面

    传递数据给下一个界面 ， 返回数据给上一个界面

如何使用Navigator 

     导入Navigator-----> render中返回Navigator----->调用Navigator的相应方法

注意如果使用TabNavigator要

npm  install react-native-tab-navigator --save

下面是StackNavigator的使用案例：

import React from react;
import  AppRegistry  from react-native;
import  Button, View, Text  from react-native;
import  createStackNavigator  from react-navigation; // Version can be specified in package.json

class HomeScreen extends React.Component 
    render() 
        return (
            <View style= flex: 1, alignItems: center, justifyContent: center >
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress=() => this.props.navigation.navigate(Details)
                />
            </View>
        );
    


class DetailsScreen extends React.Component 
    render() 
        return (
            <View style= flex: 1, alignItems: center, justifyContent: center >
                <Text>Details Screen</Text>
            </View>
        );
    


const RootStack = createStackNavigator(
    
        Home: HomeScreen,
        Details: DetailsScreen,
    ,
    
        initialRouteName: Home,
    
);

export default class App extends React.Component 
    render() 
        return <RootStack />;
    



AppRegistry.registerComponent(ReactNative1, () => App);

将这部分代码放在index.js中，就能实现页面间的跳转和返回功能；