React Native教程 1:初识React Native，了解index.ios.js里的结

使用React Native开发iOS应用需要OSX系统，然后安装Homebrew，nvm，node，npm以及watchman，你也可以有选择的使用Flow。

如官网实例：

详细教程请移步React Native中文网http://reactnative.cn/docs/0.27/getting-started.html#content

2.安装成功后运行iOS应用

• $ cd AwesomeProject
• 用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。
• 使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。
• 在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改！
• 恭喜！现在你已经成功运行并修改了你的第一个React Native应用！

3.打开新建的工程包

ios和Android的app的开发分别在 index.ios.js或者index.android.js 里。我们以index.ios.js为例，先看下代码结构：

第一部分：引用React（新版本）

import React,{ Component } from 'react';

以前的版本是

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

第二行：需要用到的控件的引入

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里达到复用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!