RN项目结构、页面组件分析

RN项目结构:

    android      编译运行代码

    ios          编译运行代码

    node_modules  自动生成三方依赖库

    App.js    显示的组件页面

    index.js  渲染显示页面

        AppRegistry.registerComponent('HelloWorld', () => App);

            将APP组件渲染到Android获取IOS中"HelloWorld"标记

        Android渲染路径:

            @Override

            protected String getJSMainModuleName() {

                return "index";

            }

            @Override

            protected String getMainComponentName() {

                return "HelloWorld";

            }

        IOS渲染路径:

            jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

            RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

                                                        moduleName:@"HelloWorld"

                                                        initialProperties:nil

                                                        launchOptions:launchOptions];

    package.js  系统项目配置文件

页面组件分析

    index.js  渲染显示页面

        导入依赖:react-native

        import { AppRegistry } from 'react-native';

        import App from './App';

        渲染:将App组件替换HelloWorld标记

        AppRegistry.registerComponent('HelloWorld', () => App);

    App.js    显示的组件页面

        导入依赖:react(自定义组件类)  react-native(使用RN中的控件和API) 

        import React, { Component } from "react";

        import { StyleSheet, Text, View } from "react-native";

        定义组件

        class App extends Component {

            render() {

                return (

                //渲染页面:RN中控件使用

               

                    Welcome to React Native!

                    To get started, edit App.js

                    欢迎来到LOL

               

                );

            }

        }

        //创建样式使用

        const styles = StyleSheet.create({

            container: {

                flex: 1,

                justifyContent: "center",

                alignItems: "center",

                backgroundColor: "#F5FCFF"

            },

            welcome: {

                fontSize: 20,

                textAlign: "center",

                margin: 10

            },

            instructions: {

                textAlign: "center",

                color: "#333333",

                marginBottom: 5

            }

        });

        //导出组件

        export default App;