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>