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中控件使用
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>欢迎来到LOL</Text>
</View>
);
}
}
//创建样式使用
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;
