React native 行中元素数量浮动（取决于其大小）的网格

试图在没有运气的情况下实现一个东西。任何帮助都将不胜感激

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

一幅画胜过千言万语：

试了很多东西都没用。。

---

提前感谢。

这是您案例中的两个有用链接，以及

这段代码在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'
  }
});

导出默认类应用程序扩展组件{
render（）{
返回(
你好
一些应用程序
电视与互联网
非凡的
它起作用了
);
}
}
const styles=StyleSheet.create({
容器：{
paddingTop:60，
对齐项目：“居中”，
为内容辩护：“中心”，
弹性：1，
flexDirection:'行'，
flexWrap:“wrap”
},
按钮：{
marginBottom:30，
宽度：“自动”，
边缘左：10，
对齐项目：“居中”，
背景颜色：“#2196F3”
},
按钮文字：{
填充：20，
颜色：“白色”
}
});

是否尝试使用flex？你能详细说明一下吗？我的意思是可能，我理解我可以尝试在文本中输入字符数，并尝试根据我打算放置的按钮数量和这些按钮的长度来设置视图的灵活性。但我希望有一些简单和动态的东西，如html：）这是一个CSS属性：）我更喜欢服务器端的家伙：）