文章目录
  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=
文章目录
  1. 1. react app一步步学习3
    1. 1.1. 组件属性方法调用
  2. 2. ReactNative组件之WebView