ReactNative--項目創建及結構分析

創建ReactNative項目

需要在命令行中創建

react-native init HelloWorld

HelloWorld是項目名，該命令會創建一個名為HelloWorld的文件夾，其中是一些依賴包，文件等

創建完成之后的目錄

 

直接在iOS模擬器中運行：

在命令行中，cd到項目文件夾，然后運行：react-native run-ios

 

 

 

 

node_modules文件夾里是依賴包

ios，android文件夾中是各自的工程文件

index.android.js和index.ios.js是入口文件

然后在Atom中打開項目，在index.ios.js文件中有一些模板代碼，下面是代碼和他們的意思

/*
  第一部分
  導入ReactNative包，導入ReactNative組件
  AppRegistry：JS運行所有ReactNative應用的入口
  StyleSheet：ReactNative中使用的樣式表，類似css樣式表
  各種開發中需要使用的組件

  模板中使用的是ES6語法，ES5語法如下
  let React = require("react-native");
  let {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } = React
  
  require函數，搜索目錄加載文件
*/

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

/*
  第二部分

  創建ReactNative組件

  模板中使用的是ES6語法，
  render（）{}是ES6的函數簡寫
  ES5語法如下：
  var HelloWorld = React.createClass（{
    render：function{
      return {};
    }
  }）;
*/

export default class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

/*
  第三部分

  StyleSheet.create創建樣式實例
  在應用中只會貝創建一次，不用每次在渲染周期中重新創建
  
*/

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,
  },
});
/*
  第四部分
  注冊入口組件

  AppRegistry：負責注冊運行ReactNative應用程序的JavaScript入口
  registerComponent注冊應用程序的入口組件。告知ReactNative哪一個組件
  被注冊為應用的根容器

  第二個參數使用了ES6語法，箭頭函數：
  {} => HelloWorld
  返回的必須是定義的組件類的名字

  定價於
  function() {return HelloWorld}
*/
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

 

遇到的bug：

#import <React/RCTBundleURLProvider.h>

說這個文件找不到

然后可能是因為依賴的類沒有添加進去

然后按照知乎上的回答莫名其妙解決了

其中，Link Binary with Library的位置是