react native进一步学习（NavigatorIOS 学习）

Posted 2020-09-30 HWWY

特别申明：本人代码不作为任何商业的用途，只是个人学习的一些心得，为了使得后来的更多的程序员少走一些弯路。*（如若侵犯你的版权还望见谅）*。

开发工具：WebStorm，xcode

1. rn的创建的时候一般用这个创建，因为最新的被墙了：

react-native init MyApp --version 0.44.3

2. 引入库的类的代码实例：

import { Navigation } from ‘react-native‘;

3. 引入自己新建的类

var List = require(‘./list‘);

4. Navigatorios使用的时候必须指定路径不然会报错。

5. 如果不是默认的加载的第一个启动页面，一般创建一个类的话用如下方法：

var List = React.createClass({

    render(){

        return(

            <View style={styles.container}>

            </View>

        );

    },

});

 

下面是就前面几个知识点我写得code：

import React, { Component } from ‘react‘;

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from ‘react-native‘;

import { NavigatorIOS } from ‘react-native‘;

var List = require(‘./list‘);

export default class navBarTest extends Component {

  render() {

    return (

      <NavigatorIOS

          style={styles.container}

          initialRoute={{

            component:List,

            title:‘游轮‘,

            passProps:{},

          }}

      />

    );

  }

}

 const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

});

AppRegistry.registerComponent(‘navBarTest‘, () => navBarTest);

以上是创建一个 NavigatorIOS ，然后默认list是主页面。跳转到另外一个详情界面的时候只需要定义一个动作，然后加实现这个函数就可以了。下面是实例代码：

import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
} from ‘react-native‘;

var  Detail = require(‘./detail‘);
var List = React.createClass({
    render(){
        return(
            <ScrollView style={styles.container}>
                <Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text>
                <Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text>
                <Text style={styles.list_item} onPress={this.goTo}> * 豪华游龙周家嗖嗖嗖嗖嗖嗖嗖嗖嗖 </Text>
            </ScrollView>
        );
    },

    goTo:function () {
        this.props.navigator.push({
            component:Detail,
            title:‘游轮详情‘,
            rightButtonTitle:‘购物车‘,
            onRightButtonPress:function () {
                alert(‘进入购物车‘);
            }
        });
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ‘#F5FCFF‘,
    },
    list_item: {
        height:30,
        color:‘#FF0067‘,
        fontSize:16,
        fontWeight:‘bold‘,
    }
});

module.exports = List;

特别的说明下，当新建一个类，想输出这个类的时候的方法就是上面的最后一句代码。及（module.exports = List;）

上面是一个简单的跳转，利用空间 NavigatorIOS 实现的，当我在使用这个东西的时候的疑惑就总结为下面几个点：
1.该怎么引入 NavigatorIOS 这个空间，上面有代码，及（import { NavigatorIOS } from ‘react-native‘;）
2.跳转的时候我怎么给它设置根控制器。上面的List。
3.跳转方法怎么实现，onPress实现的方法。