react app一步步学习

文章目录

1. 1. react app一步步学习3
   1. 1.1. 组件属性方法调用
2. 2. ReactNative组件之WebView

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中，用箭头函数来设置值，这样写的好处有二：

1. 调用方便，不需要再定义函数
2. 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=