1. 程式人生 > >react-native navigator

react-native navigator

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之間的引數傳遞