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

将這部分代碼放在index.js中，就能實作頁面間的跳轉和傳回功能；