React Native：无法使用弹性框连续渲染组件答案

【问题标题】：React Native: Unable to render components in a row with flex boxReact Native：无法使用弹性框连续渲染组件
【发布时间】：2018-04-12 12:23:27
【问题描述】：

我正在对 FlatList 中的项目使用 react-native-swipeout，每个列表项在文本（顶部图像）的两侧都有一个“减号”和“加号”按钮。

但是，当将这些组件添加为 Swipeout 组件的子组件时，它们都堆叠在彼此的顶部和行的左侧（下图）。

这里有什么我遗漏的吗？

<Swipeout
   style={styles.swipeStyle}
   {...swipeSettings}>
      <View style={styles.buttonContainer}>
          <MinusButton />
      </View>
      <View style={styles.itemStyle}>
          <Text>{this.props.name}</Text>
      </View>
      <View style={styles.buttonContainer}>
           <PlusButton />
      </View>
</Swipeout>

const styles = {
  swipeStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'flex-start',
    alignItems: 'flex-start'
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
  },
  itemStyle: {
    flex: 1,
  }
};

【问题讨论】：

标签： reactjs react-native flexbox react-native-swiper

【解决方案1】：

如果你看source code，还有一个包裹孩子的内胆，你不能直接设置内胆的style。

我建议将您的孩子包装成<View /> 之类的：

<Swipeout {...swipeSettings}>
   <View style={styles.swipeStyle}>
      <View style={styles.buttonContainer}>
          <MinusButton />
      </View>
      <View style={styles.itemStyle}>
          <Text>{this.props.name}</Text>
      </View>
      <View style={styles.buttonContainer}>
           <PlusButton />
      </View>
   </View>
</Swipeout>

【讨论】：