React-native 之 NavigatorIOS 组件

技术

我们知道，在很多app中都有导航栏，那么RN中如何实现呢，这就用到NavigatorIOS组件（这个组件只适用于iOS），跨平台(cross-platform)解决方案请看Navigation或者native-Navigation、react-native-navigation。

那么咱们就一步步的代码实现以下：
* 第一步
新建一个NavigatorIOSExample.js文件
* 第二步
直接下边代码搞起

export default class NavigatorIOSExample extends Component {
    render() {
        return (
            <NavigatorIOS
                initialRoute={{
                    component: MyScene,
                    title: 'My Initial Scene',
                    passProps: { title: 'test' },
                }}
                style={{ flex: 1 }} />
        )
    }
}
class MyScene extends Component {
    static propTypes = {
        title: PropTypes.string.isRequired,
        navigator: PropTypes.object.isRequired,
    }
    _onForward = () => {
        // alert(this.props.navigator.pop)
        this.props.navigator.push({
            component: Scene,
            title: 'Scene',
            leftButtonTitle: '返回',
            onLeftButtonPress: () => {
                this.props.navigator.pop();
            }
        });
    }
    render() {
        return (
            <View style={{ marginTop: 64 }}>
                <Text>Current Scene: {this.props.title}</Text>
                <TouchableHighlight onPress={this._onForward}>
                    <Text>Tap me to load the next scene</Text>
                </TouchableHighlight>
            </View>
        )
    }
}

NavigatorIOS 是通过route来处理子视图、props、navigation bar等。
上边initalRoute需要注意的是 :

• component 必填
• passProps 这个在官方第一个例子中没有对这个属性做处理，子组件就直接调用了this.props.title,会有warning警告说title is undefined。所以需要再passProps来对props处理。