react-native navigator

Posted 2022-12-04 水上由岐

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