react native快速上手
本文以mac环境为例,快速搭建react执行环境:
前置条件:
- node
- xcode
我使用的环境为:
$node -v
v6.11.2
$xcodebuild -version
Xcode 9.0
Build version 9A235复制代码
准备环境
如果这些都有了,那么执行如下命令:
brew install yarn
yarn global add create-react-native-app
yarn add watchman
create-react-native-app AwesomeProject
cd AwesomeProject
yarn run ios复制代码
官方文档中,使用了npm(而不是yarn),但是,我跑不起来。
然后可以看到模拟器运行起来。现在修改下工程目录下的app.js,保存后刷新下模拟器,就可以看到效果。
今天发现还有更加简单的方法,补充 2017年11月28日:
yarn global add react-native-cli
react-native init myproject
cd myproject复制代码
打开目录内的xcode工程,修改bundle name,保证可以编译,然后按cmd+R运行。
因为有很多依赖工程,并且还有构建脚本,所以需要漫长的等待。税后,可以看到应用启动完毕。可以修改app.js文件,然后模拟器内直径按cmd+R查看修改效果。
发布
首先把编写好的js代码和资源文件打包:
mkdir release_ios/
react-native bundle --entry-file App.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/复制代码
可以看到release_ios/目录内有新创建的文件。这些文件会作为资源放入xcode project,和其他一般的iOS应用一样,发布此产品到模拟器,手机和App Store即可。工程就是使用react-native init 创建的工程。
快速参考
显示图片:
import React from 'react';
import {AppRegistry, Image } from 'react-native';
export default class App extends React.Component {render() {let pic = {uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'};return (<Image source={pic} style={{width: 193, height: 110}}/>);}复制代码
}
自定义组件:
import React, { Component } from 'react';
import {Text, View } from 'react-native';
class Greeting extends Component {render() {return (<Text>Hello {this.props.name}!</Text>);}
}
export default class LotsOfGreetings extends Component {render() {return (<View style={{alignItems: 'center'}}><Greeting name='Cat3' /></View>);}
}复制代码
设置和使用状态:
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {constructor(props) {super(props);this.state = {showText: true};setInterval(() => {this.setState(previousState => {return { showText: !previousState.showText };});}, 1000);}render() {let display = this.state.showText ? this.props.text : ' ';return (<Text>{display}</Text>);}
}
export default class BlinkApp extends Component {render() {return (<View><Blink text='I love to blink' /></View>);}
}复制代码
使用样式表:
import React, { Component } from 'react';
import {StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {render() {return (<View style={{width: 150, height: 50, backgroundColor: 'powderblue'}}><Text style={styles.bigblue}>just bigblue</Text></View>);}
}
const styles = StyleSheet.create({bigblue: {color: 'blue',fontWeight: 'bold',fontSize: 30,}
});
});复制代码
使用flex排版:
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDirectionBasics extends Component {render() {return (// Try setting `flexDirection` to `column`.<View style={{flex: 1, flexDirection: 'row'}}><View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /><View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /><View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /></View>);}
};复制代码
网络请求:
import React, { Component } from 'react';
import { ActivityIndicator, ListView, Text, View } from 'react-native';
export default class Movies extends Component {constructor(props) {super(props);this.state = {isLoading: true}}componentDidMount() {return fetch('https://facebook.github.io/react-native/movies.json').then((response) => response.json()).then((responseJson) => {let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});this.setState({isLoading: false,dataSource: ds.cloneWithRows(responseJson.movies),}, function() {// do something with new state});}).catch((error) => {console.error(error);});}render() {if (this.state.isLoading) {return (<View style={{flex: 1, paddingTop: 20}}><ActivityIndicator /></View>);}return (<View style={{flex: 1, paddingTop: 20}}><ListViewdataSource={this.state.dataSource}renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}/></View>);}
}复制代码
文本输入和按钮联动:
import React, { Component } from 'react';
import {Alert, Button, Text, TextInput, View } from 'react-native';
export default class PizzaTranslator extends Component {constructor(props) {super(props);this.state = {text: 'something to say you'};}render() {return (<View style={{padding: 10}}><TextInputstyle={{height: 40}}value="something"placeholder="Type here to translate!"onChangeText={(text) => this.setState({text})}/><ButtononPress={() => { Alert.alert(this.state.text)}}title="Press Me"/></View>);}
}复制代码
react native快速上手相关推荐
- React+Webpack快速上手指南
2019独角兽企业重金招聘Python工程师标准>>> 前言 这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两 ...
- React Native快速构建跨平台移动应用程序
随着移动端应用程序开发的市场越来越大,企业需要同时支持Android和IOS平台,对研发成本和交付周期提出了更高的要求.为了降低企业开发成本,使用一套代码同时支持两种平台.本教程介绍使用React N ...
- React如何快速上手
一.React概述 英文官网:https://reactjs.org/ 中文网站:https://react.docschina.org/ 用于构建用户界面的 JavaScript 库(React只涉 ...
- iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...
- 什么是 Native、Web App、Hybrid、React Native 和 Weex?
(点击上方公众号,可快速关注) 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句话概要 Native.Web App.Hybrid.React N ...
- React 教程:快速上手指南
翻译:疯狂的技术宅 原文:https://www.toptal.com/react/... 本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章 前端和 Ja ...
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
- react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
- React 快速上手 - 目录索引
React 快速上手 - 目录索引 1~10 完整版 因为一开始在 SF 上写文,后来尝试 掘金 ,所有会有跨站地址,不要惊慌? ~~~ 对了 点赞是美德 : ) 目录 01 前言 02 开发环境搭建 ...
最新文章
- SAP PM 入门系列2 - IE03显示设备主数据
- fping的使用方法
- 什么是javax.ws.rs.core.context? [ 第2部分 ]
- TriCore处理器的上下文切换原理
- AMD中国:没有对拼多多及其平台上任何店铺授权
- 番茄风控深度剖析风控岗位必备技能
- 破解云数据库MongoDB运行变慢指南
- PaddlePaddle(8)—— 如何写好一篇高质量的精选项目
- 关于水题POJ2159
- 2017.11.21 课程随记
- 【015】基于51单片机的LCD1602流动字符串proteus仿真设计
- Leetcode︱448. Find All Numbers Disappeared in an Array找到所有数组中消失的数字.java
- 【魔兽世界插件】魔兽世界插件实战笔记从入门到放弃的心理历程 第五节 窗体文字材质设置
- beyond compare如何设置只比较实际内容?(使用关联规则比较)
- Mac OS X 快捷键(完整篇)
- HMM模型 forward backward viterbi算法
- 微软迷你服务器,十分钟上手 实测微软小企业专属服务器OS
- Mac-----Tickeys模拟机械键盘音效软件使用
- Tracert命令 路由跟踪数据包解析
- Python中的(1,)