React Native教程 1:初识React Native,了解index.ios.js里的结构
博客专区 > 啪神 的博客 > 博客详情
React Native教程 1:初识React Native,了解index.ios.js里的结构
啪神 发表于2年前
React Native教程 1:初识React Native,了解index.ios.js里的结构
  • 发表于 2年前
  • 阅读 788
  • 收藏 3
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 使用React Native开发iOS应用需要OSX系统,所以本文以iOS开发为例。使用开发工具为XCode7.2

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

共有 人打赏支持
粉丝 3
博文 11
码字总数 4212
作品 1
×
啪神
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: