首页 > 代码库 > react native进一步学习(NavigatorIOS 学习)

react native进一步学习(NavigatorIOS 学习)

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

开发工具: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实现的方法。

 

react native进一步学习(NavigatorIOS 学习)