Reactjs 弹性方向：'；第'行；It’他不在办公室工作

我陷入了一个与flexDirection有关的问题：“行”。我给

赋予了每种风格，但它的行为不像

flexDirection:“行”

我的输出

我想把所有尺寸的标签和所有颜色的标签放在同一行，但它不起作用

我的代码

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

{
计数=计数+1，
this.state.data.variants.map（（variants，index）=>(
选项_值=变量。选项_值，
唯一的大小。indexOf（选项值[count]。值）=-1？
{
唯一变量。indexOf（选项值[count].name）=-1？
{                                           
唯一的变量.push（选项值[count].name），
{'Select'+选项_值[count].name}
}
：null
}
{
唯一的\u size.push（选项\u值[count].value），
{option_values[count].value}
}
：null
))
}

我试图在每个

中给出风格，但失败了

---

非常感谢您的帮助。

您需要将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>

{
this.state.data.variants.map（（variants，index）=>(
选项_值=变量。选项_值，
唯一的大小.indexOf（选项值[index].value）=-1？
{
唯一的变量。indexOf（选项值[index]。名称）=-1？
{
唯一的变量.push（选项值[count].name），
{'Select'+选项_值[index].name}
}
：null
}
{
唯一的\u size.push（选项\u值[count].value），
{option_values[count].value}
}
：null
))
}

是的，我知道这一点，也尝试过，但不起作用。所有标题和大小都显示在行中。我认为您的代码缺少一个视图，请尝试使用包含flexDirection行的视图包装地图。我将

放置在所有相应的行中。映射并将

flexDirection:row

放置到相应的

中，但它会产生与放置背景颜色“红色”相同的结果，要查看其占用的空间，它会占用屏幕的所有宽度，就像我更新图像一样