31日
31日
React Native Flexbox例子
https://reactnative.cn/docs/flexbox
import React, { useState } from "react";
import {
View,
TouchableOpacity,
Text,
StyleSheet,
} from "react-native";
const AlignItemsLayout = () => {
const [alignItems, setAlignItems] = useState("stretch");
return (
<PreviewLayout
label="alignItems"
selectedValue={alignItems}
values={[
"stretch",
"flex-start",
"flex-end",
"center",
"baseline",
]}
setSelectedValue={setAlignItems}
>
<View
style={[styles.box, { backgroundColor: "powderblue" }]}
/>
<View
style={[styles.box, { backgroundColor: "skyblue" }]}
/>
<View
style={[
styles.box,
{
backgroundColor: "steelblue",
width: "auto",
minWidth: 50,
},
]}
/>
</PreviewLayout>
);
};
const PreviewLayout = ({
label,
children,
values,
selectedValue,
setSelectedValue,
}) => (
<View style={{ padding: 10, flex: 1 }}>
<Text style={styles.label}>{label}</Text>
<View style={styles.row}>
{values.map((value) => (
<TouchableOpacity
key={value}
onPress={() => setSelectedValue(value)}
style={[
styles.button,
selectedValue === value && styles.selected,
]}
>
<Text
style={[
styles.buttonLabel,
selectedValue === value &&
styles.selectedLabel,
]}
>
{value}
</Text>
</TouchableOpacity>
))}
</View>
<View
style={[
styles.container,
{ [label]: selectedValue },
]}
>
{children}
</View>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 8,
backgroundColor: "aliceblue",
minHeight: 200,
},
box: {
width: 50,
height: 50,
},
row: {
flexDirection: "row",
flexWrap: "wrap",
},
button: {
paddingHorizontal: 8,
paddingVertical: 6,
borderRadius: 4,
backgroundColor: "oldlace",
alignSelf: "flex-start",
marginHorizontal: "1%",
marginBottom: 6,
minWidth: "48%",
textAlign: "center",
},
selected: {
backgroundColor: "coral",
borderWidth: 0,
},
buttonLabel: {
fontSize: 12,
fontWeight: "500",
color: "coral",
},
selectedLabel: {
color: "white",
},
label: {
textAlign: "center",
marginBottom: 10,
fontSize: 24,
},
});
export default AlignItemsLayout;
代码讲解
这段代码是一个使用React和React Native框架编写的组件,用于展示和演示alignItems
样式属性在flexbox布局中的效果。下面是对代码的详细解释:
- 导入必要的库和模块:
React
和useState
来自React库,用于创建和管理组件的状态。View
,TouchableOpacity
,Text
,StyleSheet
来自React Native库,用于创建UI组件。
- 定义
AlignItemsLayout
组件:- 使用
useState
钩子创建一个状态变量alignItems
,其初始值为"stretch"
。 - 组件返回一个
PreviewLayout
组件,该组件接收一些属性,包括标签label
、子组件children
、可选值数组values
、当前选中的值selectedValue
和用于设置选中值的函数setSelectedValue
。 - 在
PreviewLayout
中,有三个View
组件作为子组件,它们有不同的背景颜色和样式。
- 使用
- 定义
PreviewLayout
组件:- 这是一个无状态的函数组件,接收一些属性来渲染界面。
- 组件包含一个文本标签
label
,以及一个按钮列表,每个按钮对应values
数组中的一个alignItems
选项。 - 当用户点击按钮时,会调用
setSelectedValue
函数来更新alignItems
的值。 - 组件还包含一个容器
View
,用于展示传入的子组件(在这个例子中是三个不同颜色的View
)。
- 样式定义:
- 使用
StyleSheet.create
方法定义了一系列样式,用于控制组件的外观。 - 样式包括容器的背景颜色、最小高度、边距,以及按钮的填充、边框圆角、背景颜色、文本样式等。
- 使用
- 导出
AlignItemsLayout
组件:- 最后,使用
export default
语句将AlignItemsLayout
组件导出,这样其他文件就可以通过导入来使用这个组件。
- 最后,使用
这个组件的主要目的是通过交互式的UI展示不同 alignItems
值在flexbox布局中的表现。用户可以通过点击不同的按钮来改变布局的 alignItems
属性,并立即看到效果。这是一个很好的教学工具,可以帮助用户理解flexbox布局中的对齐方式。
TouchableOpacity
TouchableOpacity
是 React Native 库中的一个组件,它的作用是使视图能够响应触摸事件。当用户触摸并按下封装在 TouchableOpacity
组件内的内容时,它会通过改变不透明度来提供视觉反馈,从而让用户知道视图是可交互的。
基本用法
TouchableOpacity
组件通常用于创建按钮或可触摸区域。它可以通过属性来自定义触摸反馈的行为,例如设置按下时的不透明度(activeOpacity
)。
import { TouchableOpacity } from 'react-native';
<TouchableOpacity
style={{ backgroundColor: 'blue', padding: 20 }}
onPress={() => {
console.log('Button pressed!');
}}
>
<Text>Press me!</Text>
</TouchableOpacity>
在上面的例子中,当用户按下 TouchableOpacity
组件时,会打印出 "Button pressed!"。
重要属性
activeOpacity
: 当触摸激活时,封装视图的不透明度。默认值为0.2
。onPress
: 当组件被按下时调用的函数。style
: 组件的样式,可以设置背景颜色、边框、大小等。
高级特性
TouchableOpacity
还支持一些高级特性,如 Apple TV 的视差效果(tvParallaxProperties
),以及针对 Android TV 的焦点导航(hasTVPreferredFocus
、nextFocusDown
、nextFocusForward
、nextFocusLeft
、nextFocusRight
、nextFocusUp
)。
与其他触摸组件的比较
React Native 提供了多个触摸组件,TouchableOpacity
是其中之一。与 TouchableHighlight
相比,TouchableOpacity
不会在按下时产生颜色变化,这使得它更适合于需要自定义视觉反馈的场景。
未来方向
根据搜索结果中的信息,如果你正在寻找一个更广泛且面向未来的方法来处理基于触摸的输入,可以考虑使用 Pressable
API。Pressable
是一个更现代的组件,提供了更多的功能和更好的性能。
children
在React中,children
是一个特殊的属性,它允许组件传递给它们的任何子元素。这种机制使得组件的复用性更强,因为它们可以接受任意数量的子元素,甚至可以是文本节点。
children
可以是以下任意类型的值:
- 字符串:包含文本内容。
- 数组:包含多个子元素,可以是字符串、组件等。
- 单个React元素:即
<SomeComponent />
这样的结构。 - 函数:可以是返回JSX的函数,这种用法称为高阶组件或渲染属性。
以下是children
的一些常见用法:
1. 直接传递文本或JSX元素作为子元素
function WrapperComponent({ children }) {
return <div>{children}</div>;
}
// 使用WrapperComponent
<WrapperComponent>
<p>Hello, world!</p>
<p>Another paragraph.</p>
</WrapperComponent>
2. 通过数组形式传递多个子元素
function WrapperComponent({ children }) {
return <div>{children}</div>;
}
// 使用WrapperComponent,传递数组形式的子元素
<WrapperComponent children={[
<p key="1">Hello, world!</p>,
<p key="2">Another paragraph.</p>
]} />
3. 作为组件的默认属性
function Layout({ children }) {
return <div>{children}</div>;
}
// 使用Layout组件,不显式传递children
<Layout>
<h1>Title</h1>
<p>Some content here.</p>
</Layout>
4. 使用函数作为子元素
function WithButton({ children }) {
return (
<button>
{children}
</button>
);
}
// 使用WithButton组件,其中children是一个函数
<WithButton>
{(text) => <span>{text}</span>}
</WithButton>
在这个例子中,WithButton
组件接收一个函数作为children
,这个函数在按钮内部被调用,并且按钮的文本内容可以通过这个函数动态地插入。
通过这些例子,我们可以看到children
属性的灵活性和强大之处。它使得组件能够适应各种不同的使用场景,无论是简单的文本包装,还是复杂的列表渲染,或者是高级的组件组合,children
都能提供必要的支持。
- 0
- 0
- 0
- 0
- 0
- 0