reactjs - 弹性方向 : 'row' s not working in react-native

Question

我陷入了一个与 flexDirection: 'row' 相关的问题中.我将所有样式都提供给 <View>但它的行为不像flexDirection: 'row' .

我的输出 /image/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 ，而不是将要在该行上的 View 。

<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>