ReactNative-Navigator-CFANZ编程社区

ReactNative-Navigator

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);