文档章节

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

啪神
 啪神
发布于 2016/06/15 11:16
字数 433
阅读 840
收藏 3

使用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
长宁
高级程序员
私信 提问
iOS原生混合RN开发最佳实践

做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也接...

光强
05/16
0
0
React-Native入门指南(二)——代码结构

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
0
0
初识React Native 入门配置篇

这篇博文记录了我第一次接触React Native的心酸历程,在此记录下来,以便以后查阅,也希望给别的朋友一些帮助。 废话不多说,不知道React Native是什么东西的朋友,请自行google,下面开始正...

城市船夫
2016/01/15
525
0
React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中,作者介绍通过 React Native 框架构建一个...

wangpeng198688
2015/08/11
0
0
React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中,作者介绍通过 React Native 框架构建一个...

OneAPM蓝海讯通
2015/08/11
96
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
2
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
4
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0
Kernel I2C子系统

备注:所有图片来源于网络 1,I2C协议: 物理拓扑: I2C总线由两根信号线组成,一条是时钟信号线SCL,一条是数据信号线SDA。一条I2C总线可以接多个设备,每个设备都接入I2C总线的SCL和SDA。I...

yepanl
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部