花了两天时间搞出了navigator push到tabbarios的页面,给自己做个小小的笔记。
首先在 index.ios.js 页面中定义app的根视图
mport React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,Navigator,View } from 'react-native'; import first from './first'; export default class Test extends Component { render() { let firstViewName ='first';//首页的名字定义 let firstComponent= first; //首页的js return ( <Navigator style={{flex:1}} initialRoute = {{ name: firstViewName,component: firstComponent }} //initialRoute={{ name: defaultName,component: defaultComponent }} // 这个指定了默认的页面,也就是启动app之后会看到界面的第一屏。需要填写两个参数: name 跟 component。 configureScene = {(route) => { return Navigator.SceneConfigs.PushFromRight ;//设置push的动画效果 }} renderScene = {(route,navigator) => { //route里其实就是上面initialRout的对象包含了name,component的值。 //navigator是一个Navigator的对象 let Component = route.component; return <Component {...route.params} navigator = {navigator} /> }} /> //被render出来给用户看到的component,然后navigator作为props传递给了这个component。 ); } }
接下来我们定义first.js的界面
import { View,TouchableOpacity,} from 'react-native'; import second from './second'; //导入要被push的第二个页面的js export default class first extends Component { constructor(props){ super(props); this.state= { }; } render() { return ( <View style={styles.container}> {/*按钮*/} <TouchableOpacity style={mainStyle.nextButton} onPress={this.onPushButton.bind(this)}> <Text style={mainStyle.buttonText}>下一页面</Text> </TouchableOpacity> </View> ); } //点击push事件 onPushButton(){ const {navigator} = this.props; if(navigator){ navigator.push({ name:'second',//下一个页面的名称 component:second,//下个页面的js params:{ keyName:'keyValue' //可以传任意值 } }) } } pop返回事件 在second.js的按钮点击事件中 onPopButton(){ const {navigator} =this.props; if(navigator){ navigator.pop(); } }
注意:push到第二个界面,如果感觉动画有延迟,是因为第二个页面没有子view或者父view没有设置背景颜色。设置背景颜色就可以了。