react-native navigator

来源：互联网发布：网络运行维护服务合同编辑：程序博客网时间：2024/05/29 12:30

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

0 0