文档章节

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

啪神
 啪神
发布于 2016/06/15 11:16
字数 433
阅读 821
收藏 3
点赞 0
评论 0

使用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
长宁
高级程序员
React-Native入门指南(二)——代码结构

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

vczero ⋅ 2015/06/29 ⋅ 0

iOS原生混合RN开发最佳实践

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

光强 ⋅ 05/16 ⋅ 0

React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

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

wangpeng198688 ⋅ 2015/08/11 ⋅ 0

初识React Native 入门配置篇

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

城市船夫 ⋅ 2016/01/15 ⋅ 0

React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

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

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

ReactNative快速入门笔记

ReactNative的文档地址有多个,如果你英文够好,就去研读官方的文档吧, 如果读原文比较吃力,中文官网也是不错的选择。 下面是我个人记录的一些笔记,仅供初学者入门参考 预科 入门React N...

木羽zwwill ⋅ 2017/09/19 ⋅ 0

如何用 React Native 创建一个iOS APP?(二)

我们书接上文《如何用 React Native 创建一个iOS APP?》,继续来讲如何用 React Native 创建一个iOS APP。接下来,我们会涉及到很多控件。 1 AppRegistry.registerComponent( 上述是定义应用...

OneAPM蓝海讯通 ⋅ 2016/01/12 ⋅ 0

React Native第一个Demo(1)

在Demo主要是展示一个电影信息和在ListView展示25个电影信息。 1、初始化一个项目并运行 打开终端,输入: 输入后初始化一个项目返回信息如下: 有时候Installing react-native package fro...

totogo2010 ⋅ 2016/06/03 ⋅ 0

React Native Mac环境搭建

这里只介绍Mac 上的环境搭建,其他环境搭建请参考: http://facebook.github.io/react-native/docs/getting-started.html 。 上面有所有环境搭建。 1、安装Homebrew 安装Homebrew是为安装Nod...

totogo2010 ⋅ 2016/06/03 ⋅ 0

react native 之setState

react native 版本采用0.33版本。。新版本相当于旧版本有了一部分改动,还是比较麻烦的,这里重新开始学习。 react native 结构: 这是一个最基础的代码结构,react native的精髓就在于state...

张浩淼 ⋅ 2016/09/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 23分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 35分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部