如何在React Native中设置标签样式？

Question

这是我的屏幕，我想在下一行显示这些标签，但如果失败，它将移至下一行，如何设置类别类型下的标签样式。

我想要这样的类别类型

{item.category &&
      item.category.map((item, index) => (
        <View
          style={{
            padding: 5,
            width: '30%',
            backgroundColor: 'skyblue',
          }}>
          <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            style={{
              fontSize: 16,
              width: '60%',
              padding: 5,
              color: 'grey',
              // marginLeft: 5,
              borderRadius: 40,
              // alignSelf: 'center',
              backgroundColor: theme.colors.secondary,
              textAlign: 'center',
              fontFamily: Fonts.FontAwesome,
            }}>
            {item}
          </Text>
        </View>
      ))}

Answer 1

这是您的解决方案：

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from "react-native";

const staticData = ["iOS", "Android", "Kotlin", "Boom", "Mobile", "Dev"];

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            flex: 1,
            height: 300,
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "flex-start",
          }}
        >
          {staticData.map((item) => {
            return (
              <View
                style={{
                  width: 100,
                  margin: 12,
                  padding: 8,
                  borderRadius: 20,
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "#6daf6e",
                }}
              >
                <Text
                  style={{ color: "#fdfdfd", flexShrink: 1, flexWrap: "wrap" }}
                >
                  {item}
                </Text>
              </View>
            );
          })}
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

实际上，您需要做的只是tags的主容器，并将容器样式设置为：

flexWrap: "wrap",
flexDirection: "row",
justifyContent: "center",
alignItems: "flex-start",

此外，工作示例存储库也位于此处：

https://github.com/WrathChaos/react-native-tag-wrap-overlaps-problem-solution