react native 开发APP（二）_nativechmod-CSDN博客

本文链接：https://blog.csdn.net/chmod_R_755/article/details/104163220

本文详细介绍了React Native中的控件使用和布局方式，包括Text、Button、TextInput等常见控件及其在iOS和Android平台上的对应物。同时，深入探讨了React Native特有的Component、state、render和style概念，以及如何利用TouchableWithoutFeedback实现点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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标签包围的视图都可以添加点击事件