跳至主要內容

31日


31日

React Native Flexbox例子

https://reactnative.cn/docs/flexboxopen in new window

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;

代码讲解

提示

PreviewLayout 中一个 View 包含了:

这段代码是一个使用React和React Native框架编写的组件,用于展示和演示alignItems样式属性在flexbox布局中的效果。下面是对代码的详细解释:

  1. 导入必要的库和模块:
    • ReactuseState 来自React库,用于创建和管理组件的状态。
    • View, TouchableOpacity, Text, StyleSheet 来自React Native库,用于创建UI组件。
  2. 定义 AlignItemsLayout 组件:
    • 使用 useState 钩子创建一个状态变量 alignItems,其初始值为 "stretch"
    • 组件返回一个 PreviewLayout 组件,该组件接收一些属性,包括标签 label、子组件 children、可选值数组 values、当前选中的值 selectedValue 和用于设置选中值的函数 setSelectedValue
    • PreviewLayout 中,有三个 View 组件作为子组件,它们有不同的背景颜色和样式。
  3. 定义 PreviewLayout 组件:
    • 这是一个无状态的函数组件,接收一些属性来渲染界面。
    • 组件包含一个文本标签 label,以及一个按钮列表,每个按钮对应 values 数组中的一个 alignItems 选项。
    • 当用户点击按钮时,会调用 setSelectedValue 函数来更新 alignItems 的值。
    • 组件还包含一个容器 View,用于展示传入的子组件(在这个例子中是三个不同颜色的 View)。
  4. 样式定义:
    • 使用 StyleSheet.create 方法定义了一系列样式,用于控制组件的外观。
    • 样式包括容器的背景颜色、最小高度、边距,以及按钮的填充、边框圆角、背景颜色、文本样式等。
  5. 导出 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 的焦点导航(hasTVPreferredFocusnextFocusDownnextFocusForwardnextFocusLeftnextFocusRightnextFocusUp)。

与其他触摸组件的比较

React Native 提供了多个触摸组件,TouchableOpacity 是其中之一。与 TouchableHighlight 相比,TouchableOpacity 不会在按下时产生颜色变化,这使得它更适合于需要自定义视觉反馈的场景。

未来方向

根据搜索结果中的信息,如果你正在寻找一个更广泛且面向未来的方法来处理基于触摸的输入,可以考虑使用 Pressable APIPressable 是一个更现代的组件,提供了更多的功能和更好的性能。

children

在React中,children 是一个特殊的属性,它允许组件传递给它们的任何子元素。这种机制使得组件的复用性更强,因为它们可以接受任意数量的子元素,甚至可以是文本节点。

children 可以是以下任意类型的值:

  1. 字符串:包含文本内容。
  2. 数组:包含多个子元素,可以是字符串、组件等。
  3. 单个React元素:即<SomeComponent />这样的结构。
  4. 函数:可以是返回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
评论
  • 按正序
  • 按倒序
  • 按热度