React Native的Navigator详解
前言之前,通过官方文档,我们对Navigator简介。 Navigator和NavigatorIOS属性NavigatorNavigator设置方法: 初始化路由(initialRoute),配置场景动画(configureScene),渲染场景(renderScene)。如常见的: class SimpleView extends Component {
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{component: FirstPage}}
configureScene={this.configureScene}
renderScene={this.renderScene}/>
);
}
}
常用方法
Navigator.IOSNavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。 常用方法
常用属性barTintColor : 导航条的背景颜色 class NavigatorDemo extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title:'movies',//这是navigationController的title。
component:SearchScreen,//注释:这里是要写的是相当于iOS开发里navigationController的rootViewController页面。
}}
/>
);
}
}
二级页面逻辑 import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Text,View
} from 'react-native';
class SearchScreen extends Component{
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>131231232
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: 'white',top:64,},welcome: {
fontSize: 20,textAlign: 'center',margin: 10,});
module.exports = SearchScreen;
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |