react-native navigator
阿新 • • 發佈:2019-02-01
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之間的引數傳遞