Question

我在反应原生方面学习和磨练自己的技能。我一直在玩一些简单的例子，从https://facebook.github.io/react-native/docs/tutorial.html的非常基本的AwesomeProject开始，然后转到我在https://rnplay.org/发现的其他一些例子。< / p>

这些简单的项目都采用

的形式

列出反应进口
使用var AwesomeProjectClassName = React.createClass({..
有时候会有多个类，但是会有一个重写的类使用其他类作为内容。
然后在程序的底部会有一行：

module.exports = AwesomeProjectClassName; AppRegistry.registerComponent('AwesomeProject', () => AwesomeProjectClassName;
事情会很好，生活也很好。
有关了解module.exports行的指南，请查看this link。

我试图转向一个更复杂的例子。我不明白最终的设置/启动是如何工作的。我现在看的示例是Webview教程，https://facebook.github.io/react-native/docs/webview.html代码是also available at Github.

这是程序在iPhone上的外观。

这是完整Webview示例的摘录。这段代码有点复杂：

list react imports // obviously this is pseudo code...
var WebViewExample = React.createClass({...
var Button = React.createClass({...  // no problem here
var ScaledWebView = React.createClass({...
var styles = StyleSheet.create({... // no problem here
const HTML = `<!DOCTYPE html>\n ... // no problem here

然后我得到：

exports.displayName = (undefined: ? string);
exports.title = '<WebView>';
exports.description = 'Base component to display web content';
exports.examples = [{
    title: 'Simple Browser',
    render(): ReactElement {
        return <WebViewExample / > ;
    }
}, {
    title: 'Scale Page to Fit',
    render(): ReactElement {
        return <ScaledWebView / > ;
    }
}, {
    title: 'Bundled HTML',
    render(): ReactElement {
        return ( < WebView style = {
                {
                    backgroundColor: BGWASH,
                    height: 100,
                }
            }
            source = {
                require('./helloworld.html')
            }
            scalesPageToFit = {
                true
            }
            />
        );
    }
}, {
    title: 'Static HTML',
    render(): ReactElement {
        return ( < WebView style = {
                {
                    backgroundColor: BGWASH,
                    height: 100,
                }
            }
            source = {
                {
                    html: HTML
                }
            }
            scalesPageToFit = {
                true
            }
            />
        );
    }
}, {
    title: 'POST Test',
    render(): ReactElement {
        return ( < WebView style = {
                {
                    backgroundColor: BGWASH,
                    height: 100,
                }
            }
            source = {
                {
                    uri: 'http://www.posttestserver.com/post.php',
                    method: 'POST',
                    body: 'foo=bar&bar=foo'
                }
            }
            scalesPageToFit = {
                false
            }
            />
        );
    }
}];

我不明白如何发送＆＃34;这个程序到我的ios模拟器。没有一个控制事物的重写类。它根本不清楚如何注册这些东西。任何人都可以解释我失踪的东西吗？你如何设置

module.exports = AwesomeProjectClassName; AppRegistry.registerComponent('AwesomeProject', () => AwesomeProjectClassName;

这个例子？你能解释一下究竟发生了什么：

exports.displayName = (undefined: ? string);
exports.title = '<WebView>';
exports.description = 'Base component to display web content';
exports.examples ...

我只是没有理解这里的概念。通过我的代码，我可以看到exports是一个简单的对象，exports.examples是一个对象数组。数组中包含的那些对象具有渲染功能和标题等......我不清楚如何调用该内容，以便获得如上图所示的示例输出。在整个React Native示例中都有这种类型的构造，但是在哪里我找不到有关这些东西如何工作的任何细节。有人有线索吗？

非常感谢！

Answer 1

此link不是真正的应用。它只是一个组件。看看该文件位于<?php while ( $getPost->have_posts()):$getPost->the_post(); ?>文件夹而不是repo中的Libraries。创建Examples是为了演示所有组件。如果您感到好奇，可以找到UIExplorer UIExplorer's in this file。但它更复杂，并且允许使用不同的组件。 AppRegistry.registerComponent用于使变量/函数/对象在其他文件中可用。尝试export文件夹中的其他示例，它们更适合学习RN并仅使用UIExplorer来了解如何使用特定组件。

React Native - 如何注册高级程序（exports.examples）以进行加载？

1 个答案: