react-native 的导航器是比较复杂的概念,这里记录一下
renderImages: function() {
return (
<NavigatorIOS style={styles.navigator}
initialRoute={{
component: MyView,
title: 'My View Title',
passProps: { myProp: 'foo' },
backButtonTitle: 'Custom Back',
rightButtonTitle: 'Cancel',
leftButtonTitle: 'back',
}}/>
);
},
上面这段代码,当renderImages方法被触发的时候,导航器就会加载MyView视图
下面是MyView的定义:
var MyView = React.createClass({
render: function(){
return (
<ScrollView contentContainerStyle={[styles.contentContainer]}>
<View style={styles.flexContainer}>
<TouchableHighlight onPress={this.bigImage} style={{flex:1,height:100}}>
<Image style={styles.logo} source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} />
</TouchableHighlight>
</View>
</ScrollView>
);
}
});
这样一个的视图
根据这个,其实可以创造出更深一层
增加bigImage方法查看大图
bigImage : function(){
this.props.navigator.push({
title: 'title',
component: NavigatorIOSExample,
rightButtonTitle: 'test1',
leftButtonTitle: 'back2',
onLeftButtonPress:() => this.props.navigator.pop(),
onRightButtonPress:()=> AlertIOS.alert(
'Foo Title',
this.props.myProp
)
});
},
此外可以看出onLeftButtonPress方法的作用是返回上个视图,
另外,可以通过passProps属性来进行view之间的参数传递