React Native 的 Navigator 组件使用方式
React Native的编程思想类似于iOS
, 导航栏也使用Navigator
作为标识, 类似于Android
的ActionBar
. 导航栏作为最重要的应用组件之一, 除了处理页面导航功能以外, 还会提供页面栈的管理, 管理页面的跳入和跳出. 本文介绍一下 Navigator 组件的使用方式.http://www.open-open.com/lib/view/1461047062382
关于React Native项目的启动, 参考1, 参考2.
简单使用
Navigator
添加 Navigator 的组件<Navigator/>
. 设置方法: 初始化路由(initialRoute), 配置场景动画(configureScene), 渲染场景(renderScene). 初始化路由(initialRoute), 使用FirstPage
页面作为首页.
// 主模块
class SimpleView extends Component {
// ...
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{component: FirstPage}}
configureScene={this.configureScene}
renderScene={this.renderScene}/>
);
}
}
配置场景动画(configureScene): 根据路由的type
属性, 判断使用的动画样式, 底部弹出或右侧弹出.
/**
* 配置场景动画
* @param route 路由
* @param routeStack 路由栈
* @returns {*} 动画
*/
configureScene(route, routeStack) {
if (route.type == 'Bottom') {
return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
}
return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
}
渲染场景(renderScene): 使用动态加载组件的方式. 设置加载页面的navigator
参数, 其余使用route.passProps
属性传递其他参数.
/**
* 使用动态页面加载
* @param route 路由
* @param navigator 导航器
* @returns {XML} 页面
*/
renderScene(route, navigator) {
return <route.component navigator={navigator} {...route.passProps} />;
}
也可以使用静态加载组件
, 需要预定义组件, 没有动态加载灵活.
/**
* 渲染场景, 通过不同参数, 设置不同页面
* @param route 路由, 场景信息
* @param navigator 导航器
* @returns {XML} 页面
*/
renderScene(route, navigator) {
if (route.name == 'FirstPage') {
return <FirstPage navigator={navigator} {...route.passProps}/>
} else if (route.name == 'SecondPage') {
return <SecondPage navigator={navigator} {...route.passProps}/>
}
}
第一页
FirstPage组件: 包含导航栏标题和两个跳转按钮. 提供两种跳转动画, 右出和底部. 点击按钮调用_navigate()
方法, 跳转到第二页.
// 第一页. 使用Component可以自动生成注释, 符合标准
class FirstPage extends Component {
// ...
render() {
return (
<View style={styles.container}>
<View style={styles.heading}>
<Text style={styles.headText}>
{'第一页'}
</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={()=>this._navigate('你好! (来源第一页:右出)')}>
<Text style={styles.buttonText}>
{'跳转至第二页(右出)'}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={()=>this._navigate('你好! (来源第一页:底出)', 'Bottom')}>
<Text style={styles.buttonText}>
{'跳转至第二页(底部)'}
</Text>
</TouchableOpacity>
</View>
);
}
}
也可以使用
var FirstPage = React.createClass()
创建组件, 但没有使用继承Component方式
规范, 不能自动生成注释.
_navigate()
方法: 导航跳转, 调用navigator.push()
方法. 传递参数passProps
的name
属性, type
动画类型, component
跳转组件.
/**
* 给Navigator传递参数.
* @param name 参数
* @private
*/
_navigate(name, type = 'Normal') {
this.props.navigator.push({
component: SecondPage,
passProps: {
name: name
},
type: type
})
}
下划线表示私有方法, 类似Java的private限定符.
第二页
SecondPage组件: 第二页, 跳出返回第一页. 调用navigator.pop()
方法, 使用当前页面出栈, 显示上一个栈内页面.
// 第二页, 点击跳出返回第一页
class SecondPage extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.heading}>
<Text style={styles.headText}>
第二页: {this.props.name}
</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={()=>this.props.navigator.pop()}>
<Text style={styles.buttonText}>
返回上一页
</Text>
</TouchableOpacity>
</View>
);
}
}
Navigator的主要功能, 是管理页面栈, 控制页面的跳入跳出.
统一导航栏
对于应用而言, 需要统一的导航栏, Navigator 组件也提供导航栏的定制.
Navigator
与上文类似, 额外添加navigationBar
的属性, 自定义设置导航栏, 保持所有页面的导航栏一致. 属性添加<NavigationBar/>
标签, 通过routeMapper
控制导航栏的功能和样式.
// 主模块
class UniformView extends Component {
//...
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'FirstPage', component: FirstPage}}
configureScene={this.configureScene}
renderScene={this.renderScene}
navigationBar={
<Navigator.NavigationBar
style={styles.navContainer}
routeMapper={NavigationBarRouteMapper}/>}
/>
);
}
}
NavigationBarRouteMapper
NavigationBarRouteMapper: 导航栏路由映射器, 设置左键LeftButton, 右键RightButton, 标题Title.
// 导航栏的Mapper
var NavigationBarRouteMapper = {
// 左键
LeftButton(route, navigator, index, navState) {
// ...
},
// 右键
RightButton(route, navigator, index, navState) {
// ...
},
// 标题
Title(route, navigator, index, navState) {
return (
<View style={styles.navContainer}>
<Text style={styles.title}>
应用标题
</Text>
</View>
);
}
};
左键LeftButton: index
属性表示当前页面的索引, 通过判断index
属性, 获知栈内是否有其他页面, 判断后退
按钮是否显示. 点击调用navigator.pop()
出栈.
// 左键
LeftButton(route, navigator, index, navState) {
if (index > 0) {
return (
<View style={styles.navContainer}>
<TouchableOpacity
underlayColor='transparent'
onPress={() => {if (index > 0) {navigator.pop()}}}>
<Text style={styles.leftNavButtonText}>
后退
</Text>
</TouchableOpacity>
</View>
);
} else {
return null;
}
},
右键RightButton: 点击调用路由(route)的onPress()
方法, 提示信息. 根据路由的rightText
属性添加显示文字.
// 右键
RightButton(route, navigator, index, navState) {
if (route.onPress)
return (
<View style={styles.navContainer}>
<TouchableOpacity
onPress={() => route.onPress()}>
<Text style={styles.rightNavButtonText}>
{route.rightText || '右键'}
</Text>
</TouchableOpacity>
</View>
);
},
第一页/第二页
第一页与第二页与上文类似, 当第一页跳转时, 传递的路由信息有些变化, 控制第二页与导航栏的显示信息.
// 填出提示框
onPress() {
alert("我是Spike!");
}
/**
* 跳转页面至SecondPage
* @param name 传递参数
* @param type 动画类型
*/
gotoNext(name, type = 'Normal') {
this.props.navigator.push({
component: SecondPage,
passProps: {
id: name
},
onPress: this.onPress,
rightText: 'ALERT!',
type: type
})
}
React Native 路由的基本功能就是这些, 控制页面的切换, 控制导航栏的功能. 导航栏作为应用最重要的组件之一, 一定要熟练掌握.
OK, that's all ! Enjoy it!
来源:https://github.com/SpikeKing/WclNavigator
相关文章
- 云图说|OLAP开源引擎的一匹黑马,MRS集群组件之ClickHouse
- tidb的tidb组件的配置文件详解
- 学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
- react-native城市列表组件
- ucml 子业务组件与行为参与者业务组件
- React组件动状态(入门)
- react:创建组件的几种方式与区别
- Flutter ValueNotifier 倒计时 局部刷新组件 在StatelessWidget 中刷新倒计时
- 【Netty】Netty核心组件介绍
- React组件Components的两种表示方式
- 为 CmakeLists.txt 添加 boost 组件
- 大数据Hadoop(二十六):YARN三大组件介绍
- React组件设计实践总结01 - 类型检查
- React 组件模式-有状态组件 x 无状态组件、容器组件 x 展示组件、高阶组件 x 渲染回调(函数作为子组件)
- React之组件通信方式
- react中组件通信的几种方式
- React高阶组件应用
- React进阶之高阶组件
- react-native动态姿态tab组件
- react-native组件的拆分技巧
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改
- React Navigation 自认比较好的navigator组件(一)
- React-Native 中自定义checkbox组件
- React Native开源播放器Video组件(react-native-video)
- React Native 组件之TextInput
- 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?
- vue——爷孙组件之间通信