如何解决如何在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。