ReactNative導航

常用的兼容的android和iOS的導航目前推薦使用StackNavigation，目前官網最新版本。舊版本的Navigation依舊可以使用。

import React from 'react';
import {
    TouchableOpacity,
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';
import {StackNavigator} from 'react-navigation';

import { Button } from 'antd-mobile';

import MyButton from './src/component/MyButton';

import Setting from './src/activity/Setting';
import DataSet from './src/activity/DataSet'
import SecondPage from './SecondPage';
class HomeScreen extends React.Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: '設置中心',
        headerRight: <Text onPress={() => alert('0')} style={styles.text}>info</Text>,
        headerBackTitle: '返回',
        headerLeft: <Image source={require('./src/img/btn_back_white.png')}/>,
        style: {backgroundColor: '#5ebafd'}
    });

    render() {
        return (

            <View style={styles.container}>
                <Text
                    style={styles.Button}
                    onPress={() => this.props.navigation.navigate('ProfileNavigator')}
                    title="資料設置"
                > 資料設置</Text>
                <Text
                    style={styles.Button}
                    onPress={() => this.props.navigation.navigate('AccountBind')}
                    title="賬號綁定"
                >賬號綁定
                </Text>
                <Text
                    style={styles.Button}
                    onPress={() => this.props.navigation.navigate('ProfileNavigator')}
                    title="個性簽名"
                >個性簽名</Text>
                <Text
                    style={styles.Button}
                    onPress={() => this.props.navigation.navigate('ProfileNavigator')}
                    title="我的賬戶"
                >我的賬戶</Text>
                <Button
                    style={styles.Button}
                    onPress={() => this.props.navigation.navigate('ProfileNavigator')}
                    title="我的積分"
                />
            </View>

        );
    }
}


const untitled1 = StackNavigator({
    Home: {screen: HomeScreen},
    ProfileNavigator: {
        screen: SecondPage,
    },
    AccountBind: {
        screen: DataSet,
    },
});

const Dimensions = require('Dimensions');
const {width, height, scale} = Dimensions.get('window');
const styles = StyleSheet.create({
    button: {
        height: 50,
        width: 400,
        backgroundColor: '#5ebafd',
        color:'blue',
        alignItems: 'flex-start',//垂直
        justifyContent: 'center',//水平
    },
    container: {
        width: width,
        height: height,
        alignItems: 'center',//垂直
        justifyContent: 'center',//水平
    },
    text: {

        fontSize: 14,
        marginRight: 8

    }
});
AppRegistry.registerComponent('untitled1', () => untitled1);