React Native教程 1:初識React Native,瞭解index.ios.js裏的結構

使用React Native開發iOS應用須要OSX系統,而後安裝Homebrew,nvm,node,npm以及watchman,你也能夠有選擇的使用Flow。html

如官網實例:node

詳細教程請移步React Native中文網http://reactnative.cn/docs/0.27/getting-started.html#contentreact

2.安裝成功後運行iOS應用android

  • $ cd AwesomeProject
  • 用XCode打開ios/AwesomeProject.xcodeproj並點擊Run按鈕。
  • 使用你喜歡的文本編輯器打開index.ios.js並隨便改上幾行。
  • 在iOS Emulator中按下⌘-R就能夠刷新APP並看到你的最新修改!
  • 恭喜!如今你已經成功運行並修改了你的第一個React Native應用!

 3.打開新建的工程包ios

ios和Android的app的開發分別在  index.ios.js或者index.android.js 裏。咱們以index.ios.js爲例,先看下代碼結構:npm

第一部分:引用React(新版本)react-native

import React, { Component } from 'react';

之前的版本是xcode

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

第二行:須要用到的控件的引入app

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

第三部分:頁面佈局編輯器

class test extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to forIOS 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>
    );
  }
}

第四部分:頁面排版的樣式設置

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color :'red'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

 Android中的項目結構和ios是相似的,只是個別插件名稱不同。因此能夠開發ios或者Android,而後把代碼負責到其餘的平臺的js裏達到複用。

相關文章
相關標籤/搜索