ReactNative导航

来源：互联网发布：服务器网卡聚合linux 编辑：程序博客网时间：2024/05/16 15:11
常用的兼容的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);
阅读全文
0 0