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 (
    <ScrollView
      contentContainerStyle={{ 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（它是滚动视图本身的样式）。

✅ 示例

<ScrollView
  style={{ 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}>
      <ScrollView
        keyboardDismissMode="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>
  );
}

✅ 功能说明：

• 点击空白处关闭键盘 (TouchableWithoutFeedback + Keyboard.dismiss)
• 输入时可滚动 (ScrollView)
• 拖动时关闭键盘 (keyboardDismissMode="on-drag")
• 内容左右留白 (paddingHorizontal)

---