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之间的参数传递