react-native - FlexBox：对齐非线性元素

Question

我正在尝试在弹性框中对齐非线性无线电组。我的收音机看起来像这样

但我想将此广播组对齐为

为此，我已经尝试过justifyContent: "space-between"和其他。有没有可能通过使用 flexBox 来保持线性的非线性组元素

编辑

这是我的代码

return (

  <View
    style={{
      flexDirection: "row",
      flexWrap: "wrap",
      justifyContent: "space-between",
      width: 150
    }}
  >
    {products.map((val) => {
      return (
        <TouchableOpacity key={val.id} onPress={this.radioClick.bind(this, val.id)} style={{ flexDirection: "row" }}>
          <View style={{
            height: 24,
            width: 24,
            borderRadius: 12,
            borderWidth: 2,
            borderColor: '#000',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            {
              val.id == this.state.radioSelected ?
                <View style={{
                  height: 12,
                  width: 12,
                  borderRadius: 6,
                  backgroundColor: '#000',
                }} />
                : null
            }
          </View>

          <Text style={{ marginTop: 3, marginLeft: 5 }}>{val.name}</Text>

        </TouchableOpacity>
      )
    })}

  </View>
);

标签： react-nativeflexbox

Answer 1

您需要添加具有不同 flex 属性的视图才能实现布局。

<View style={styles.container}>
  <View style={styles.firstTwoColumns}>
  <View style={styles.firstColumn}>
  <Text>True</Text>
  <Text>Some</Text>
  <Text>Two</Text>
  <Text>ssdhhjgghikllkij</Text>
  </View>
  <View style={styles.secondColumn}>
  <Text>False</Text>
  <Text>One</Text>
  <Text>Three</Text>
  </View>
  </View>
   <View style={styles.lastRows}>
  <Text>5</Text>
  <Text>6</Text>
  <Text>7</Text>
  <Text>8</Text>
  </View>
  <View style={styles.lastRows}>
  <Text>9</Text>
  <Text>10</Text>
  <Text>11</Text>
  <Text></Text>
  </View>
  </View>


  const styles = StyleSheet.create({
  container: {
  flex:1,
  backgroundColor: '#ecf0f1',
  },

  firstTwoColumns:{
  flexDirection:'row',
  justifyContent: "space-between",
  },
  firstColumn:{
  flexDirection:'column',
  justifyContent:'flex-start'
  },
  secondColumn:{
  flexDirection:'column',
  justifyContent:'flex-start'
  },
  lastRows:{
  flexDirection:'row',
  justifyContent:'space-between',
  },
  });

<div data-snack-id="@d49web/flexbox-2-column-2-row-layout" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>