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

React Native第四章

news 2025/11/2 14:52:19

好的 👍 我来帮你系统讲解一下 React Native 中这些组件与属性的用法、适用场景及常见搭配。
我们一起来看每个的作用、核心属性和示例代码。

🧩 一、`TouchableWithoutFeedback`

👉 “可点击区域”组件，没有视觉反馈。

📘 作用

让子组件响应点击事件，但不改变外观（比如不显示按下高亮、阴影等）。

⚙️ 常用属性

属性	类型	说明
`onPress`	`function`	点击触发的回调函数
`onLongPress`	`function`	长按触发的回调
`disabled`	`boolean`	是否禁用点击
`children`	`ReactNode`	包裹的内容

🧠 常见用途

点击空白区域关闭键盘
自定义无样式点击区域

✅ 示例

import { TouchableWithoutFeedback, Keyboard, View, TextInput } from 'react-native';export default function App() {return (<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}><View style={{ flex: 1, justifyContent: 'center', padding: 20 }}><TextInput placeholder="点击空白处关闭键盘" /></View></TouchableWithoutFeedback>);
}

🟦 二、`Button`

👉 一个简单的内置按钮组件。

📘 作用

提供基础按钮交互，不需要手写 TouchableOpacity。

⚙️ 常用属性

属性	类型	说明
`title`	`string`	按钮文字
`onPress`	`function`	点击事件
`color`	`string`	按钮文字或背景颜色（iOS/Android 样式略不同）
`disabled`	`boolean`	禁用状态

✅ 示例

import { Button, View } from 'react-native';export default function App() {return (<View style={{ padding: 20 }}><Button title="提交" onPress={() => alert('已提交')} color="#007BFF" /></View>);
}

🧾 三、`ScrollView`

👉 可滚动的视图容器。

📘 作用

在内容超出屏幕时，允许垂直或水平滚动。

⚙️ 常用属性

属性	类型	说明
`horizontal`	`boolean`	是否水平滚动
`showsVerticalScrollIndicator`	`boolean`	显示垂直滚动条
`keyboardDismissMode`	`'none' \| 'on-drag' \| 'interactive'`	滚动时键盘处理方式
`contentContainerStyle`	`object`	内容容器样式（作用于内部内容）
`style`	`object`	ScrollView 自身样式
`refreshControl`	`<RefreshControl />`	下拉刷新控件

✅ 示例

import { ScrollView, Text } from 'react-native';export default function App() {return (<ScrollViewcontentContainerStyle={{ paddingHorizontal: 20, paddingVertical: 40 }}keyboardDismissMode="on-drag">{[...Array(30)].map((_, i) => (<Text key={i} style={{ marginVertical: 10 }}>第 {i + 1} 行内容</Text>))}</ScrollView>);
}

🧮 四、`keyboardDismissMode`

👉 ScrollView / FlatList / SectionList 的属性之一。

📘 作用

控制当用户滚动时如何处理键盘。

⚙️ 取值说明

值	说明
`'none'`	滚动时不隐藏键盘
`'on-drag'`	用户拖动时关闭键盘
`'interactive'`	用户开始拖动时键盘随滚动渐渐收起（仅 iOS 支持）

✅ 示例

<ScrollView keyboardDismissMode="on-drag"><TextInput placeholder="向下拖动时键盘会自动关闭" />
</ScrollView>

🧱 五、`contentContainerStyle`

👉 ScrollView、FlatList 的属性。

📘 作用

是内部 滚动内容容器的样式，不同于外层的 style（它是滚动视图本身的样式）。

✅ 示例

<ScrollViewstyle={{ backgroundColor: '#f8f8f8' }} // ScrollView外层contentContainerStyle={{paddingHorizontal: 20, // 内部左右内边距paddingBottom: 50,}}
><Text>这里是内容</Text>
</ScrollView>

🎨 六、`paddingHorizontal`

👉 View / Style 属性之一。

📘 作用

设置左右内边距（相当于 paddingLeft + paddingRight）。

✅ 示例

<View style={{ paddingHorizontal: 20, backgroundColor: '#fff' }}><Text>内容左右各留20间距</Text>
</View>

🧩 综合示例：常见登录页布局

import React from 'react';
import { View, Text, TextInput, Button, ScrollView, TouchableWithoutFeedback, Keyboard 
} from 'react-native';export default function LoginScreen() {return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><ScrollViewkeyboardDismissMode="on-drag"contentContainerStyle={{flexGrow: 1,justifyContent: 'center',paddingHorizontal: 24,}}><Text style={{ fontSize: 28, fontWeight: 'bold', marginBottom: 20 }}>登录</Text><TextInput placeholder="用户名" style={{ borderBottomWidth: 1, marginBottom: 16 }} /><TextInput placeholder="密码" secureTextEntry style={{ borderBottomWidth: 1, marginBottom: 32 }} /><Button title="登 录" onPress={() => alert('登录成功')} /></ScrollView></TouchableWithoutFeedback>);
}

✅ 功能说明：