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