React-Native - 使用Navigator组件进行自定义导航 [英] React-Native - Custom navigation with Navigator component

问题描述

我正在探索 React Native 的可能性，同时开发一个在视图之间自定义导航的演示应用在 Navigator 组件的帮助下 - http：/ $face $。 > renderScene 返回传递的组件：

  class App扩展了React.Component {
 render（ ）{
 return（
< Navigator 
 initialRoute = {{name：'WelcomeView'，component：WelcomeView}} 
 configureScene = {（）=> {
返回Navigator.SceneConfigs.FloatFromRight; 
}} 
 renderScene = {（route，navigator）=> {
 //计算乐趣的数量c调用
 console.log（route，navigator）; 
 
 if（route.component）{
返回React.createElement（route.component，{navigator}）; 
} 
}} 
 /> 
）; 
} 
} 
  

现在应用包含2个观点：

 类FeedView扩展了React.Component {
 render（）{
 return（
< View style = {styles.container}> 
< Text> 
 Feed View！
< / Text> 
< / View> 
）; 
} 
} 
 
类WelcomeView扩展了React.Component {
 onPressFeed（）{
 this.props.navigator.push（{
名称：'FeedView'，
组件：FeedView 
}）; 
} 
 
 render（）{
 return（
< View style = {styles.container}> 
< text style = {styles .welcome}> 
欢迎观看！
< / Text> 
 
< Text onPress = {this.onPressFeed.bind（this）}> 
转到Feed！
< / Text> 
< / View> 
）; 
} 
} 
  

我想弄清楚的是 -

• 我在日志中看到按下go to feed renderScene 被调用虽然视图正确呈现一次，但仍有好几次。这是动画的工作原理吗？

    index.ios.js：57对象{名称：'WelcomeView'，组件：function} 
   index.ios.js：57对象{name：'FeedView'，组件：function} 
   //呈现Feed视图
    




• 一般来说，我的方法是否符合React方式，还是可以做得更好？

我想要实现的是类似于 NavigatorIOS 但没有导航栏（但是有些视图会有自己的自定义导航栏）。

解决方案

你的方法应该很好用。在Fb的大型应用中，我们避免为场景组件调用 require（），直到我们渲染它，这可以节省一些启动时间。

首次将场景推送到导航器时，应调用 renderScene 函数。当导航器重新渲染时，也会调用活动场景。如果你看到 renderScene 在推送之后多次调用，那么它可能是一个错误。

导航器仍在进行中，但如果您发现任何问题，请在github上提交并标记我！ （@ericvicenti）

I'm exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component - http://facebook.github.io/react-native/docs/navigator.html#content

The main app class renders navigator and inside renderScene returns passed component:

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 });
                    }
                }}
             />
        );
    }
}

For now app contains 2 views:

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>
        );
    }
}

What I want to figure out is -

• I see in logs that when pressing "go to feed" renderScene is called several times though the view renders correctly once. Is it how the animation works?

  index.ios.js:57 Object {name: 'WelcomeView', component: function}
  index.ios.js:57 Object {name: 'FeedView', component: function}
  // renders Feed View
  

• Generally does my approach conforms the React way, or it can be done better?

What I want to achieve is something similar to NavigatorIOS but without navigation bar (however some views will have their own custom navigation bar).

解决方案

Your approach should work great. In big apps at Fb, we avoid calling the require() for the scene component until we render it, which can save a bit of start-up time.

The renderScene function should be called when the scene is first pushed to the Navigator. It will also be called for the active scene when the Navigator gets re-rendered. If you see renderScene get called multiple times after a push, then it is probably a bug.

The navigator is still a work in progress, but if you find any problems with it please file on github and tag me! (@ericvicenti)

这篇关于React-Native - 使用Navigator组件进行自定义导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！