首页 > 代码库 > 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 学习)