react native：为什么 flexDirection row 在我的项目中不起作用？我想把它放在行方向

Question

我记不太清了，但是做了一些事情之后 enter image description here

我的图标和描述像默认的 flexDirection 一样放置我找不到影响子组件位置的外部组件命令。我想放置图标和它的描述（用韩语写的）行方向。

Screen.js

import SettingContent from '../components/SettingContent'

export default function UserScreen() {
  
  //index: number, iconcolor,iconname,contentname,contentcolor: string, contentfunc: console.log("~~")
  return (
    <SafeAreaView style={{backgroundColor: '#0092ff',}}>
      <SafeAreaView style={userStyles.title}>
        <Text style={{
          color:'#fff',
          fontSize: 30,
          fontWeight: 'bold', 
      }}>U S E R</Text>
      </SafeAreaView>
      <View style={userStyles.contentList}>
        {contents.map(content => (
            <SettingContent
              key={content.index}
              content={content}
            />
        ))}
      </View>
    </SafeAreaView>
  )
}

const userStyles = StyleSheet.create({
  contentList: {
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5,
    backgroundColor: '#fff'
  },
  title: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 22.5,
    paddingBottom: 45,
  },
  
})

SettingContent.js

const SettingContent = ({content}) => {
    return(
        <TouchableOpacity onPress = {()=>{content.contentFunc}} style={listStyles.list}>
            <Icon name={content.iconName} size= {26.5} color={content.iconColor}/>
            <View style={listStyles.textContainer}>
                <Text style={listStyles(content.contentColor).text}>{content.contentName}</Text>
            </View>
        </TouchableOpacity>
    );
};

const listStyles = (textColor) => StyleSheet.create({
    list: {
        flexDirection:'row',
        backgroundColor:'white',
        paddingVertical: 17.5,
        paddingHorizontal: 5,
        borderColor:'#696969',
        borderBottomWidth:1,
    },
    text: {
        color:textColor,
        marginStart: 10,
        fontSize:26.5,
        fontWeight:'800',
    },
    textContainer: {
        justifyContent: 'flex-start',
    },
})
export default SettingContent;

我因为未知的小错误第一次看到几个小时而感到压力。

Answer 1

虽然组件的样式不受styleSheet参数的影响，我们必须为 styleSheet 的参数赋值。我将 listStyles.anything 更改为 listStyles(content.contentColor).anything.

react native：为什么 flexDirection row 在我的项目中不起作用？我想把它放在行方向

react native: why flexDirection row not working in my project? i want to place it row direction

css

reactjs

react-native

styled-components