当前位置：首页 > news >正文

React Native基础知识点

news 2025/9/11 5:37:54

1、组件

与react编写web应用不同，不是使用div、span等标签。而是使用RN官方提供的组件，如View、Text等组件来搭建页面

2、宽高

React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。默认值为auto

 <View style={{width: 50，height: 50 }}/>

上面创建了一个View组件，它的宽高都是50，那么无论在什么手机上，它显示的大小都是一样的。
宽高还可以使用百分比来设置:

<View style={{width:'20%', height: 50 }} />

注意：百分比用字符串，数值直接写
以及接下来要讲的布局，通过布局来控制宽高，而不再通过widthheight来指定宽高了。

3、样式写法的一些区别

我们可以简单的把View，Text想象为html中的div或span，不同的地方在于css中，我们在一个元素中指定颜色，字体等，那么这个元素内部所有的元素都会继承这个元素的颜色或者字体，而在React Native中文本只能放在Text组件内，也不允许给View组件设置颜色、字体等属性
样式名基本上是遵循了 web 上的 CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。
style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组--在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

在真实项目中，我们一般会使用StyleSheet.create来创建样式对象

import React from 'react'; 
import {View,Text，StyleSheet} from'react-native';
class App extends React.Component {render(){return(<View style={styles.container}><Text>Hello world</Text></View>);}
}const styles = StyleSheet.create({
container: {backgroundColor: ' red',
}

在React Native的组件 View组件虽然有一系列的触摸处理函数，但是想要监听到用户的操作是点击，还是不方便的。所以React Native提供了一系列的Touchable组件，专门用于处理点击事件。比如: TouchableOpacity， TouchableNativeFeedback,TouchableHighlight等。

这些组件都可以监听到一下的事件:

onBlur ：失去焦点事件
onFocus ：得到焦点事件
onLayout：当加载或者布局改变的事件
onLongPress ：长按事件
onPress ：触摸操作结束时调用，相当于点击
onPressIn ：只要按下并调用了touchable元素，就会调用此方法，且是在onPress方法之前调用的
onPressOut：触摸释放后立即调用，且是在onPress方法之前调用
最常用的方法无疑是onPress

4、滚动视图
在html中，如果页面内容超过了屏幕展示的高度，浏览器会自动出现滚动条。我们也可以直接给div设置一个固定的高度，再设置overflow:scroll，就可以让div具有滚动效果。但是在React Native中如果我们需要一个滚动效果，我们需要使用一个新的组件 ScrollView或者FlatList。

ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。

FlatList组件不仅性能很好，还拥有很多其他的优点支持水平布局模式