我正在探索React Native的可能性,同时在Navigator component的帮助下开发一个演示应用程序,在视图之间进行自定义导航.

主应用程序类呈现导航器,内部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 });
                    }
                }}
             />
        );
    }
}

目前,APP包含两个视图:

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

我想弄明白的是:

  • 我在日志(log)中看到,当按下"Go to Feed"时,虽然视图正确呈现了一次,但是调用了几次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函数.当重新渲染导航器时,也会为活动场景调用它.如果您看到在push之后多次调用renderScene,那么它可能是一个错误.

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

Ios相关问答推荐

在SwiftUI中为圆角矩形创建均匀分布的点轮廓

如何在不将应用程序留在SwiftUI上的情况下更改语言?

BezierPath 中绘制图像形状轮廓的算法(Canny 边缘检测器)

JSONDecoder 在模拟器上运行良好时无法在真实设备上解码

将 SwiftUI 与 @AppStorage 和动态函数调用一起使用

禁用 UITextField 的自动更正

如何使用 Swift 文档注释

Xcode 6 App Store 提交失败并显示您的帐户已经拥有有效的 iOS 分发证书

Xcode 缺少支持文件 iOS 12.2 (16E227)

如何使用 Swift 从assets资源 中加载特定图像

如何比较两个 UIImage 对象

在 iPhone 中将 UIViewController 显示为弹出窗口

刷新由 Xcode 7 管理的团队配置文件中的设备?

~= Swift 中的运算符

如何使用 swift 添加速率按钮的链接?

UITextView 从文本的底部或中间开始

iOS中的apk类似功能是什么?

cocoapods中~>的用法是什么

Storyboard Segue 从视图控制器到自身

正确使用 Alamofire 的 URLRequestConvertible