脚本宝典收集整理的这篇文章主要介绍了React Native中NavigatorIOS组件的简单使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
NavigatorIOS 导航
NavigatorIOS是React Native自带的导航组件,下面是它的简单应用。
- 初始化第一个场景
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { NavigatorIOS, Text } from 'react-native';
import { NextScene } from 'react-native';
export default class NavigatorIOSApp extends Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene,
title: '初始化第一个场景',
}}
style={{flex: 1}}
/>
);
}
}
class MyScene extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
navigator: PropTypes.object.isRequired,
}
_onForward = () => {
this.props.navigator.push({
component:NextScene
title: '第二个场景'
});
}
render() {
return (
<View>
<Text>Current Scene: { this.props.title }</Text>
<TouchableHighlight onPress={this._onForward}>
<Text>前往下一个场景</Text>
</TouchableHighlight>
</View>
)
}
}@H_206_126@
- 第二个场景
export default class NextScene extends Component {
render() {
return (
<View>
<Text>这是第二个场景</Text>
</View>
)
}
}
以上是脚本宝典为你收集整理的React Native中NavigatorIOS组件的简单使用全部内容,希望文章能够帮你解决React Native中NavigatorIOS组件的简单使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。