React Native:无法使用弹性框渲染行中的组件

时间:2018-04-12 12:23:28

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

我正在对FlatList中的项目使用react-native-swipeout,每个列表项都有一个'减去'和'加'按钮文本的两侧(顶部图像)。

但是,当将这些组件添加为Swipeout组件的子组件时,它们全部堆叠在彼此的顶部和行的左侧(底部图像)。

enter image description here

我在这里找不到什么东西?

<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,
  }
};

1 个答案:

答案 0 :(得分:1)

如果您查看source code,则会有另一个内部容器包裹子容器,您无法直接设置内部容器的InlineKeyboardButton

我建议将您的孩子包装成style,如:

<View />