flex-direction："row"在 react-native 中不起作用

Question

我陷入了一个与flexDirection: 'row'有关的问题。我把每一种风格都给了<View>但它的行为不像flexDirection: 'row'。

我的输出https://i.stack.imgur.com/dNOTF.png

我想在行中获取所有尺寸的标签，并在行中获取所有颜色标签，但它不起作用。

我的代码

<View key={index}>
{
count=count+1,
this.state.data.variants.map((variants, index) => (
option_values = variants.option_values,
unique_size.indexOf(option_values[count].value) == -1 ?
<View key={index} style={{flex: 1,}}>
{
unique_variant.indexOf(option_values[count].name) == -1 ?    
<View>
{                                           
unique_variant.push(option_values[count].name),          
<View style={{padding: 5}}>
<CapitalizedText style={{fontSize: 12, fontWeight: 'bold', color: '#585858'}}>{'Select ' + option_values[count].name}
</CapitalizedText>
</View>
}
</View>
: null
}
<View style={{flexDirection: 'row', flex: 1,marginBottom: 5}}>
{
unique_size.push(option_values[count].value),
<TouchableOpacity activeOpacity={0.8} style={s.select_variants} key={index}
>
<Text style={s.select_size_txt}>{option_values[count].value}</Text>
</TouchableOpacity>
}
</View>
</View>
: null
))
}</View>

我试图在每<View>中都赋予风格，但我失败了。

任何帮助，不胜感激。

Answer 1

您需要将 flexDirection 行提供给包装要在行中显示的内容的视图，而不是将要出现在该行上的视图。

<View style = {{flexDirection:'row'}}>
<ContentDisplayedOnARow/>
</View>
<View  key={index}>
{
this.state.data.variants.map((variants, index) => (
option_values = variants.option_values,
unique_size.indexOf(option_values[index].value) === -1 ?
<View  style = {{flexDirection:'row'}} key={index}>
{
unique_variant.indexOf(option_values[index].name) === -1 ?
<View>
{
unique_variant.push(option_values[count].name),
<View style={{padding: 5}}>
<CapitalizedText style={{fontSize: 12, fontWeight: 'bold', color: '#585858'}}>
{'Select ' + option_values[index].name}
</CapitalizedText>
</View>
}
</View>
: null
}
<View style={{marginBottom: 5}}>
{
unique_size.push(option_values[count].value),
<TouchableOpacity activeOpacity={0.8} style={s.select_variants} key={index}>
<Text style={s.select_size_txt}>{option_values[count].value}</Text>
</TouchableOpacity>
}
</View>
</View>
: null
))
}</View>