使用Navigator组件的本机自定义导航

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

主app类呈现导航器和内部。renderScene返回传递的组件:

class App extends React.Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: 'WelcomeView', component: WelcomeView}}
                configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    // count the number of func calls
                    console.log(route, navigator); 

                    if (route.component) {
                        return React.createElement(route.component, { navigator });
                    }
                }}
             />
        );
    }
}

目前,应用程序包含两个视图:

class FeedView extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>
                    Feed View!
                </Text>
            </View>
        );
    }
}

class WelcomeView extends React.Component {
    onPressFeed() {
        this.props.navigator.push({
            name: 'FeedView',
            component: FeedView
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome View!
                </Text>

                <Text onPress={this.onPressFeed.bind(this)}>
                    Go to feed!
                </Text>
            </View>
        );
    }
}

我想知道的是

  • 我在原木上看到当按下“去喂”renderScene被多次调用,但视图只正确呈现一次。动画是怎么工作的? .ios.js:57个对象{name:‘WelcomView’,Component:Function}index.ios.js:57个对象{name:‘FeedView’,组件:function}//呈现源视图
  • 一般来说,我的方法是否符合反应方式,还是可以做得更好?

提问于
用户回答回答于

你的方法应该很有效。在FB的大型应用程序中,我们避免调用require()对于场景组件,直到我们呈现它,这可以节省一点启动时间。

renderScene当场景第一次被推送到Navigator时,应该调用这个函数。当Navigator重新呈现时,它也将被调用为活动场景。如果你看到renderScene之后多次被调用。push可能是个小虫子。

用户回答回答于

Navigator现在被废弃了RN 0.44.0你可以用react-native-deprecated-custom-components相反,支持正在使用的现有应用程序。Navigator

扫码关注云+社区