我想知道是否有一种方法可以让flexDirection: 'row'多行.因为现在如果我在第二行有10个对象,non将进入第二行.这是我在文档中添加了另外两个<View>元素的示例

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

推荐答案

您可以使用flex-wrap: wrap,这样当内容达到此组件允许的最大宽度时,它将断开为新行.

      <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

希望有帮助

React-native相关问答推荐

React-Native:请纠正我对状态如何工作的误解 - 动态文本输入

React Native 映射未定义不是函数

找不到变量:firebase/react native(expo)上的 IDBIndex

RNMK - 超级表达式必须为空或函数

React Native:在 ScrollView contentContainerStyle 上设置 flex:1 会导致组件重叠

可能的未处理promise 拒绝(id:0):错误: "getLoginData" is read-only

redux-saga:如何以编程方式为yields 创建多个calls/side-effects?

如何更改 React Native(android)应用程序的远程推送通知图标

Visual Studio 2017 中的 React Native

如何将组件中的props传递给 FlatList renderItem

如何在 React Native 中将静态图像拉伸为背景?

如何从 React Native 应用程序打开 Google Play store ?

React Native:自定义字体在 Android 和 iOS 上呈现不同

如何在 react-native 中从 AsyncStorage 中删除元素

使用带有样式组件的动画

在 React Native 中使用小数

在 navigator pop 上react Native Pass 属性

Xcode 12 - 没有要编译的架构(ONLY_ACTIVE_ARCH=YES,active arch=x86_64,VALID_ARCHS=arm64e armv7s arm64 arm7)

xcode 使用错误的 node.js 版本

React Native <>(空)组件到底是什么