RN項目結(jié)構(gòu):
? ? 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? 系統(tǒng)項目配置文件
頁面組件分析
? ? index.js? 渲染顯示頁面
? ? ? ? 導(dǎo)入依賴:react-native
? ? ? ? import { AppRegistry } from 'react-native';
? ? ? ? import App from './App';
? ? ? ? 渲染:將App組件替換HelloWorld標記
? ? ? ? AppRegistry.registerComponent('HelloWorld', () => App);
? ? App.js? ? 顯示的組件頁面
? ? ? ? 導(dǎo)入依賴: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>
? ? ? ? ? ? ? ? );
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //創(chuàng)建樣式使用
? ? ? ? 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
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? //導(dǎo)出組件
? ? ? ? export default App;
