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

前端之家收集整理的这篇文章主要介绍了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里达到复用。

猜你在找的React相关文章