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

问题描述

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

我想要这样的类别类型

{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>
      ))}

解决方法

这是您的解决方案：

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",backgroundColor: "#6daf6e",}}
              >
                <Text
                  style={{ color: "#fdfdfd",flexShrink: 1,flexWrap: "wrap" }}
                >
                  {item}
                </Text>
              </View>
            );
          })}
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

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

flexWrap: "wrap",

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

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