• react-native 简单的导航


    默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西。

    前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎么接触过JavaScript,所以我写的垃圾代码,请大神们不要见笑。

    好了,废话不多说,在app里面navigation用的频率肯定不低,所以现在我分享一下这个坑。

    首先,RN环境搭建教程太多,我就不说了,如果不会的同学可以直接看这里

    然后我们来新建我们的项目

    打开终端,进入你想创建项目所在的目录,这里我直接在桌面上创建了

    cd desktop

    创建项目

    react-native init NavDemo

    静静的呆一会,咱们的NavDemo就创建好了。

    打开文件之后,我们看到的就是这样。

    然后进入ios文件夹下,运行NavDemo.xcodeproj ,这样,我们新建的项目就跑起来了。模拟器上显示的就是这个效果


    然后,我们打开index.ios.js文件。文件内容我有篇随笔我们来更改一下Welcome to React Native!的颜色,直接在

    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },

    里面加上color:'red',

    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,

    color:'red',
    },

    看效果

    好了,这个先玩到这,我们把为了方便,把index.ios.js文件里render包裹的代码删掉;引入Navigator,为了整洁,我们把Style也删了,然后代码就变成了这样

     1 import React, { Component } from 'react';
     2 import {
     3 AppRegistry,
     4 Navigator,
     5 Platform
     6 } from 'react-native';
     7 class NavDemo extends Component {
     8   render() {
     9     return (
    10 
    11     );
    12   }
    13 }
    14 AppRegistry.registerComponent('NavDemo', () => NavDemo);

    现在重点来了,我们在NavDemo文件夹中新建一个app文件夹,在app文件夹中新建一个frist.js文件,文件里的内容如下

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Navgator,
      TouchableOpacity
    } from 'react-native';
    export default class FirstPage extends Component {
      render() {
        return (
          <View style={styles.container}>
             <Text style={styles.welcome}>
                这是第一页,点击跳到第二页
             </Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'red',
      },
    });

    然后我们在index.ios.js中引入first

    import React, { Component } from 'react';
    import {
      AppRegistry,
      Navigator,
      Platform,
    } from 'react-native';
    
    import FirstPage from './app/first.js';
    
    const defaultRoute = {
      component: FirstPage,
    };
    
    class NavDemo extends Component {
      _renderScene(route, navigator) {
        let Component = route.component;
        return (
          <Component {...route.params} navigator={navigator} />
        );
      }
      render() {
        return (
          <Navigator
            initialRoute={defaultRoute}
            renderScene={this._renderScene}
            />
        );
      }
    }
    AppRegistry.registerComponent('NavDemo', () => NavDemo);

    现在你可以运行一下看一下效果

    很显然,first.js才是我们的第一页,index.ios.js只是起到了一个实例化导航的作用。

    那么我们在新建第二页second.js

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Navgator,
      TouchableOpacity
    } from 'react-native';
    
    export default class SecondPage extends Component {
      render() {
        return (
          <View style={styles.container}>
             <Text style={styles.welcome}>
                这是第二页,点击回到第一页
             </Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'red',
      },
    });

    好了,第二页也建好了,那么我们来实现如何跳到第二页,首先我们在first.js中给text添加点击事件和方法

    <TouchableOpacity onPress={this._openPage.bind(this)}>
    <Text style={styles.welcome}>
    这是第一页,点击跳到第二页
    </Text>
    </TouchableOpacity>

    然后引入第二页,

    import SecondPage from './second';

    实现点击方法

    _openPage() {
    this.props.navigator.push({
    component: SecondPage,
    })
    },

    试试看能不能跳到第二页。完全可以。

    那么如何back呢?

    我们在second.js中也要给text添加方法

    <TouchableOpacity onPress={this._openPage.bind(this)}>
    <Text style={styles.welcome}>
    回到第一页
    </Text>
    </TouchableOpacity>,

    实现方法

    _openPage() {
    this.props.navigator.pop()
    }

    运行一下看看,OK,简单的导航就这样介绍完毕,完整的代码我贴在下面

    first.js

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Navgator,
      TouchableOpacity
    } from 'react-native';
    
    import SecondPage from './second';
    
    export default class FirstPage extends Component {
    
      _openPage() {
          this.props.navigator.push({
          component: SecondPage,
          })
      }
      render() {
        return (
          <View style={styles.container}>
            <TouchableOpacity onPress={this._openPage.bind(this)}>
             <Text style={styles.welcome}>
                这是第一页,点击跳到第二页       
             </Text>
           </TouchableOpacity>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'red',
      },
    });

    second.js

    import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      View,
      Navgator,
      TouchableOpacity
    } from 'react-native';
    
    export default class SecondPage extends Component {
    
      _openPage() {
          this.props.navigator.pop()
      }
      render() {
        return (
          <View style={styles.container}>
            <TouchableOpacity onPress={this._openPage.bind(this)}>
             <Text style={styles.welcome}>
                回到第一页
             </Text>
           </TouchableOpacity>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'red',
      },
    });

    本文原创,转载前请声明原文地址

     

  • 相关阅读:
    程序员第一定律:关于技能与收入
    JS注册/移除事件处理程序
    关于程序猿,你不知道的15件事
    .NET后台输出js脚本的方法
    新项目经理必读:分析什么是项目经理
    项目如何开始:怎样和客户一起搞定需求
    【转】为什么程序员讨厌修改静态检查问题
    js的with语句使用方法
    软件版本号 详解
    PHP记忆碎片2投票汇总
  • 原文地址:https://www.cnblogs.com/demon404/p/5718653.html
Copyright © 2020-2023  润新知