代码之家 › 专栏 › 技术社区 › 0xgareth

React Native:无法使用flex box渲染行中的组件

react-native-swiper flexbox react-native reactjs

1

0xgareth · 技术社区 · 8 年前

我对平面列表中的项目使用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,
  }
};

1 回复 | 直到 8 年前

1

Stackia 8 年前

如果你看看 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>