网格中包含浮动数量的元素（取决于它们的大小）

Question

尝试实现没有运气的东西。任何帮助将受到高度赞赏。

每行应显示尽可能多的元素，但前提是它们适合。元素可能具有不同的宽度（取决于文本）。一切都应该集中。

一张图片胜过千言万语：

尝试了很多没有用的东西.. 提前谢谢。

Answer 1

这是您案例https://facebook.github.io/react-native/docs/flexbox.html和https://facebook.github.io/react-native/docs/layout-props.html#flexwrap

中的两个有用链接

该代码在iOS上成功运行

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Hello</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Some app</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>TV&Internet</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>Remarkable</Text></TouchableHighlight>
        <TouchableHighlight style={styles.button}><Text style={styles.buttonText}>It works</Text></TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  button: {
    marginBottom: 30,
    width: 'auto',
    marginLeft: 10,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }
});