使用React-Native中的Navigator组件进行自定义导航

我正在开发React应用程序时探索React

Native的可能性,并借助Navigatorcomponent在视图之间进行自定义导航。

主应用程序类呈现导航器,并在内部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虽然视图正确呈现一次,但按“转到菜单”时会多次调用。动画是如何工作的?

        index.ios.js:57 Object {name: 'WelcomeView', component: function}

index.ios.js:57 Object {name: 'FeedView', component: function}

// renders Feed View

  • 通常,我的方法符合React方法,还是可以做得更好?

我要实现的功能类似于NavigatorIOS但没有导航栏(但是某些视图将具有自己的自定义导航栏)。

回答:

您的方法应该很好用。在Fb的大型应用程序中,我们避免在require()渲染之前为场景组件调用,这可以节省一些启动时间。

renderScene首次将场景推送到导航器时应调用该函数。当导航器重新渲染时,也将为活动场景调用该视图。如果您renderScene在之后看到多次被调用push,则可能是一个错误。

导航器仍在开发中,但是如果发现任何问题,请在github上归档并标记我!(@ericvicenti)

以上是 使用React-Native中的Navigator组件进行自定义导航 的全部内容, 来源链接: utcz.com/qa/408521.html

回到顶部