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;

更多相关文章

随机推荐