常用的兼容的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);