React Native基础组件与样式

光影少年

40人浏览 · 2026-07-11 14:58:34

光影少年 · 2026-07-11 14:58:34 发布

React Native（RN）使用 JavaScript/TypeScript + React 开发移动应用，其基础组件类似于 HTML，但针对 iOS 和 Android 做了封装。

一、基础组件

1. View（容器）

相当于 HTML 的 <div>。

import { View } from 'react-native';

export default function App() {
  return (
    <View>
    </View>
  );
}

常用于：

布局
包裹其他组件
Flex 布局

2. Text（文本）

RN 中所有文字必须放在 Text 中。

<Text>Hello React Native</Text>

不能这样写：

<View>
  Hello
</View>

会报错。

3. Image（图片）

<Image
  source={{ uri: 'https://example.com/logo.png' }}
  style={{ width:100,height:100 }}
/>

本地图片：

<Image source={require('./assets/logo.png')} />

4. TextInput（输入框）

<TextInput
  placeholder="请输入用户名"
/>

密码：

<TextInput
  secureTextEntry
/>

5. Button（按钮）

<Button
  title="登录"
  onPress={()=>{
    console.log("点击")
  }}
/>

实际开发一般使用：

TouchableOpacity
Pressable

因为样式更灵活。

6. Pressable

推荐使用。

<Pressable onPress={()=>{
    console.log("点击")
}}>
    <Text>按钮</Text>
</Pressable>

7. ScrollView（滚动）

内容较少时。

<ScrollView>

</ScrollView>

可以上下滚动。

8. FlatList（列表）

官方推荐。

const data=[
  {id:'1',name:'Tom'},
  {id:'2',name:'Jack'}
]

<FlatList
    data={data}
    renderItem={({item})=>(
        <Text>{item.name}</Text>
    )}
/>

适合：

新闻
商品
聊天记录

性能比 ScrollView 高。

9. SectionList

带分组。

例如：

水果
苹果
香蕉

蔬菜
白菜
土豆

10. SafeAreaView

避免内容进入：

刘海
状态栏

<SafeAreaView>

</SafeAreaView>

11. ActivityIndicator

加载动画

<ActivityIndicator
    size="large"
    color="red"
/>

12. Switch

开关

<Switch
    value={true}
/>

13. Modal

弹窗

<Modal visible={true}>
    <Text>这是弹窗</Text>
</Modal>

14. StatusBar

状态栏

<StatusBar
    barStyle="light-content"
/>

二、样式（Style）

RN 没有 CSS。

使用 JavaScript 对象。

方法一

<View
style={{
    width:100,
    height:100,
    backgroundColor:"red"
}}
>
</View>

方法二（推荐）

const styles=StyleSheet.create({

    box:{
        width:100,
        height:100,
        backgroundColor:'red'
    }

})

使用：

<View style={styles.box}/>

三、常见样式

宽高

width:100
height:200

百分比

width:"100%"

背景颜色

backgroundColor:"red"

字体

fontSize:20

fontWeight:'bold'

color:'#333'

边框

borderWidth:1

borderColor:"#ddd"

borderRadius:10

外边距

margin:10

marginTop:20

marginHorizontal:15

内边距

padding:20

paddingVertical:15

阴影

Android

elevation:5

iOS

shadowColor:"#000"

shadowOpacity:0.3

shadowRadius:6

shadowOffset:{
    width:0,
    height:3
}

四、Flex 布局（最重要）

RN 默认：

flexDirection:'column'

不是 HTML 的 row。

例如：

<View
style={{
    flex:1
}}
>

占满整个屏幕。

横向排列

flexDirection:'row'

主轴居中

justifyContent:'center'

交叉轴居中

alignItems:'center'

两端对齐

justifyContent:'space-between'

示例

<View
style={{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
}}
>
    <Text>Hello RN</Text>
</View>

五、定位

相对定位

position:'relative'

绝对定位

position:'absolute'

top:20

left:20

六、常用事件

点击

onPress

输入

onChangeText

获得焦点

onFocus

失去焦点

onBlur

滚动

onScroll

七、综合示例

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://picsum.photos/100' }}
        style={styles.avatar}
      />

      <Text style={styles.title}>React Native</Text>

      <Pressable
        style={styles.button}
        onPress={() => alert('点击成功')}
      >
        <Text style={styles.buttonText}>登录</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});