React Native的页面跳转组件-navigation

71 阅读 0 评论 47 点赞

我是靠谱客的博主鲤鱼手链，最近开发中收集的这篇文章主要介绍React Native的页面跳转组件-navigation，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 新建React-Native项目

参考：创建指定版本的react-native项目

2. 安裝 react-navigation

npm install react-navigation --save

3. 新建两个js文件：Main.js和Login.js

3.1 创建js文件

在项目目录中新建一个js文件夹，然后创建Main.js和Login.js；

项目结构如下：

3.2 Login.js

import React, {Component} from 'react';
import Main from './Main';

import {StyleSheet, Text, View, TextInput, Button,Image} from 'react-native';

export default class Login extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Button title='进入主界面' onPress={() => navigate('Main', {name: 'Jane'})}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

3.3 Main.js

import  React,{Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';

export  default class Main extends  Component{
    static  navigationOptions={
        title:"主界面"
    };
    render(){
        return(
            <View style={styles.container}>
                <Text>这是主界面</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

4. index.js文件

import { AppRegistry } from 'react-native';
import {createStackNavigator} from 'react-navigation'
import Login from './js/Login';
import Main from './js/Main';

const test = createStackNavigator({
    Login :{screen:Login},
    Main:{screen:Main},
});


AppRegistry.registerComponent('RNDemo', () => test);

1.导入 react-navigation和Main、Login的js文件；

2.通过 createStackNavigator chua创建每个跳转的screen的实体；

3. AppRegistry.registerComponent注册组件，是项目的入口；