react app一步步学习
react app一步步学习3
上一节根据RN的官方文档,建立了一个ios的RN项目,体验了一把RN的组件与style设置。
将例子的代码附上:
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native’;
export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
你好,React
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
<!—more—>
以上是官方demo的例子,现在我要启动reactApp,肯定是要启动ios的模拟器,那怎么启动呢,官方的答案是:
进入项目目录,执行命令:
cd AwesomeProject
react-native run-ios
好了,我们看到了模拟器被启动,这个页面也就被显示出来了。
![paste image][image-1]
成功后弹出另一个shell窗口:
![paste image][image-2]
模似器:
![paste image][image-3]
模似器中的代码:
import React, { Component } from 'react';
import {AppRegistry, Text,TextInput, View} from 'react-native'
class AppInput extends Component{
constructor(props) {
super(props);
this.state = {text: ''};
}
render(){
return (<View style={{position:'relative',left:'10%',top:'30%',width:'50%'}}>
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} placeholder="请输入手机号"
onChangeText={(text) => this.setState({text})}>
</TextInput><Text>{this.state.text}</Text></View>);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AppInput);
代码解析:import React, { Component } from 'react';
这个是源自es6的语法,babel解释了它。
意思是引入React类,和Component组件,从react.js中。
import {AppRegistry, Text,TextInput, View} from 'react-native'
这个也是一样,引入了四个组件,从RN中。
- props是只读的
和react一样,props是只读的,是不允许修改的,只允许从父组件传递给子组件。
- state用来更新内容与状态
state用来更新数据内容
- 箭头函数绑定事件
箭头函数从js诞生之日其实就存在,而firefox是最早使用箭头函数的公司。
```var f = v ==>x;
`相当于
var f = function(v){
return x;
}
如果没有参数,则:var f=()=>x;
RN则写成:
`` let f=()=>x;
组件属性方法调用
<TabBarIOS>
<TabBarIOS.Item
title="设置"
icon={{uri: img4_base64, scale: 3.5}}
selected={this.state.selectedTap == 'setting'}
onPress={()=>{
this.setState({selectedTap:'setting'})
}}>
{this.renderView('设置')}
</TabBarIOS.Item>
</TabBarIOS>
onPress中,用箭头函数来设置值,这样写的好处有二:
- 调用方便,不需要再定义函数
- this实例不需要重新绑定,可以直接设置state的更新值
但作为一个后端出身的我来说,箭头函数实在太难理解了,而且很别扭。
当然,如果箭头函数不写在这里,单独声明函数也是可以的。
pressBtn=()=>this.setState({selectedTap:'setting'});`
但如果这样声明,那this将不能直接去更改state,因为this已经不代表组件对象了,而是当前方法的funtion。
pressBtn(){
this.setState({selectedTap:'setting'});//将会报错
}
![paste image][image-4]
ReactNative组件之WebView
根据官方的例子,重要介绍如下属性:
- source
源地址,写法如下:<WebView source={(uri: 'https://github.com/facebook/react-native')} style={(marginTop: 20)} />
source的值的格式:
source?: {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number
Loads static html or a uri (with optional headers) in the WebView.
注意:
如果是加载本地的html文件,则需要这样写:
<WebView source=