本文以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}}>
<ListView
dataSource={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}}>
<TextInput
style={{height: 40}}
value="something"
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Button
onPress={() => { Alert.alert(this.state.text)}}
title="Press Me"
/>
</View>
);
}
}复制代码