react native 开发APP（二）

react native 控件和布局

官网 https://reactnative.cn/

1.简单的页面

改造下App.js

这是一个首页，我们分析下代码

import React, {Component} from 'react';
import {View, StyleSheet, Text} from 'react-native';

class App extends Component{

        constructor(pros){
            super(pros);
            this.state = {
                name:'Hello React Native'
            }
        }
        render() {
            return (
                <View style={styles.view1}>
                    <Text style={{backgroundColor:'red',textAlign:'center'}}>{this.state.name}</Text>
                </View>
            )
        }
}
const styles = StyleSheet.create({
    view1:{
        flex:1,
        justifyContent:'center',
    }
});
export default App;

上面代码出现了比较关键字和关键方法

1.Component

class App extends Component

React native	iOS	Android
Component	UIViewController	Activity

这个表很清楚的说明了Component是干什么的 ，多了不解释

2.state

react独有的，可以理解为存放变量的容器，变量如果在render里面被引用，变量值发生改变会调用render方法
说人话
state变量和render双向绑定

3.render

React native	iOS	Android
render	xib	xml
布局、逻辑	布局	布局

4.style

React native	iOS	Android	HTML
style	Layout约束条件	Layout约束条件	css样式

2.常用控件

控件对比

-	React native	iOS	Android
文本显示	Text	UILabel	TextView
按钮	Button	UIButton	Button
输入框	TextInput	UITextField	Edittext
图片	Image	UIImageView	ImageView
列表	FlatList	UITableView	RecyclerView
视图	View	UIView	View

区别注意

-	React native	iOS	Android
文本显示	支持点击、长按事件	不支持事件	支持点击、长按事件
按钮	内容只能为文本	内容为文本、图片	内容为文本
输入框	单行、多行	单行	单行。多行
图片	远程图片、本地图片	本地图片	本地图片
列表	自带上拉、下拉	无	无
视图	css样式布局	代码或XIB或SB	XML布局

注意事项
在react native中没有按钮这个概念，虽然react native 提供了 Button这个控件，但是基本不能满足开发需求，为满足需求react 提供了TouchableWithoutFeedback 也就是被TouchableWithoutFeedback标签包围的视图都可以添加点击事件

平台	React native	iOS	Android
可以添加点击事件条件	TouchableWithoutFeedback	所有UIControl	所有View

当然iOS和Android可以通过手势来添加点击事件

2.常用布局

平台	React native	iOS	Android
布局方式	横向、纵向	可认为绝对布局	相对、线性布局等