React-Native 中 StackNavigator的跳转界面的使用

前端之家收集整理的这篇文章主要介绍了React-Native 中 StackNavigator的跳转界面的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

刚接触React-Native,其中对React,javascript,也仅仅是知道的水平,但是并不影响对这边文章的阅读,首先你需要确认,开发react-native的环境配置,和工具安装你已经全部安装并测试可以使用!

一,新建一个项目:(名称随意)Smlz

1,可以选择在任意一个盘符下,新建一个空的文件夹,用命令行的形式把项目新建在这个文件夹下,比如我新建项目在rnProjects目录下:

使用命令:

react-native init Smlz

其中命令行一定要切换到你想要把项目放入的目录下;

创建成功后:

你可以连接上你的手机,然后输入:

react-native run-android

运行android项目,提示如下信息


所以:如下图所示;先切换到项目的内,在执行命令

手机运行成功图如下:

如果你在这一步提示错误
比如:提示没有注册,或者连接不上端口8081,请确保你已经开启react-native 服务,(本人装的node.js,在执行命令时,会自动开启一个执行服务窗口,)然后关闭占用该端口的其他服务,再次尝试执行命令 react-native run-android
如果还是不行,请贴出错误留言,或者百度

二,下载 安装 StackNavigator:

继续回到命令行界面:然后执行

yarn add react-navigation

如下图所示:


下载完毕后,我们需要修改


代码,并且新建一个文件夹;

三,代码修改添加
新建一个test的文件夹,并新建一个App.js的文件,然后用 Notepad++打开;
并把如下代码复制粘贴进去:

import React from 'react';
import {
    AppRegistry,View,StyleSheet,Button,Text,} from 'react-native';
//导入StackNavigator这个组件
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',};
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text style={styles.text}>我靠,这React-native的坑,真的是太深了,掉进去,爬不出来</Text>
                <Button
                    onPress={() => navigate('Chat',{user:'React-Native'})}
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

//add a ChatScreen
class ChatScreen extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,});
    render() {
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text style={styles.welcome}>Chat with {params.user}</Text>
            </View>
        );
    }
}

//定义text的风格
const styles = StyleSheet.create({
    container: {
        flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
        fontSize: 20,textAlign: 'center',margin: 10,instructions: {
        textAlign: 'center',color: '#333333',marginBottom: 5,text: {
        fontSize: 30,backgroundColor: 'red',}
});

 const Simple = StackNavigator({

     Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});


 //表示输出的意思
export default Simple;

然后打开 index.android.js文件修改代码如下:

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

import Simple from './Test/App.js'

export default class Smlz extends Component {
  render() {
    return (
       <Simple/>
    );
  }
}

AppRegistry.registerComponent('Smlz',() => Smlz);

保存后重新运行项目

效果图如下:

实现这个效果整整花了我三天的时间,期间的坑真的太多,太多,如果你有幸一次成功,恭喜你太幸运了,如果有问题,请留言,或者自行google!

StackNavigator官方链接地址

DEMO地址在评论第一条

原文链接:https://www.f2er.com/react/302765.html

猜你在找的React相关文章