每行显示 2 个项目 [反应原生]

Posted 2023-03-07

【中文标题】每行显示 2 个项目 [反应原生]

【英文标题】：show 2 items per row[react native]

【发布时间】：2017-03-18 00:41:01

【问题描述】：

我正在学习本机反应，在所有教程中，我看到 ListView 每行仅使用 1 个项目。不过，我没有使用过 ListView。我只有 6 个项目必须显示为平面网格，每行 2 个项目并且应该是响应式的。我知道这是一个基本问题，但我也从我身边尝试过，这可以在图片中看到

这是我的代码

 renderDeviceEventList() 
    return _.map(this.props.deviceEventOptions, deviceEventOption => (
        <View key=deviceEventOption.id>
            <Icon
                name=deviceEventOption.icon_name
                color="#ddd"
                size=30
                onPress=() =>
                    this.props.selectDeviceEvent(deviceEventOption)
                
            />
            <Text style= color: "#ff4c4c" >
                deviceEventOption.icon_name
            </Text>
        </View>
    ));

render() 
    return (
        <View
            style=
                flex: 1,
                top: 60,
                flexDirection: "row",
                justifyContent: "space-around",
                flexWrap: "wrap",
                marginBottom: 10
            
        >
            this.renderDeviceEventList()
        </View>
    );

【问题讨论】：

当我在 renderDeviceEventList 中为 View 组件提供宽度和高度时，它可以工作但没有响应。我知道有一个 Dimension 库，但我听说它在更改方向时不起作用。

【参考方案1】：

正确的做法是使用flexBasis，将值设置为(1/n)%，其中n 是所需的行数> 0。对于两行：

.parent 
    flex: 1;
    flexWrap: 'wrap';
    flexDirecton: 'row';

.child 
    flexBasis: '50%';

【讨论】：

太棒了！谢谢 - 父 'flexDirecton' 中的小错字，很容易修复，但破坏了复制粘贴性:) 支持和非常感谢。

很好，谢谢（只要确保'wrap'和'row'等值用单引号括起来，否则react native会报错

Flex方向属性有错字，请更新如下：flexDirection

【参考方案2】：

您可以从 react native 尝试平面列表。 您可以在其中指定列数，也可以提及垂直方向或水平方向。 示例代码：

<FlatList
data=this.props.data
keyExtractor=this._keyExtractor     //has to be unique   
renderItem=this._renderItem //method to render the data in the way you want using styling u need
horizontal=false
numColumns=2
          />

更多信息请参考https://facebook.github.io/react-native/docs/flatlist.html。

【参考方案3】：

要使用 ListView 制作 2 行网格，您可以使用以下代码作为示例：

renderGridItem( item )
    return (<TouchableOpacity style=styles.gridItem>
        <View style=[styles.gridItemImage, justifyContent:'center', alignItems:'center']>
            <Text style=fontSize:25, color:'white'>
                item.fields.name.charAt(0).toUpperCase()
            </Text>
        </View>
        <Text style=styles.gridItemText>item.fields.name</Text> 
    </TouchableOpacity>
    );


renderCategories()

    var listItems = this.dsinit.cloneWithRows(this.state.dataSource);

    return (
        <ScrollView style=backgroundColor: '#E8E8E8', flex: 1 >
            <ListView 
                contentContainerStyle=styles.grid
                dataSource=listItems
                renderRow=(item) => this.renderGridItem(item)
            />
        </ScrollView>
    );


const styles = StyleSheet.create(
    grid: 
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1,
    ,
    gridItem: 
        margin:5,
        width: 150,
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
    ,
    gridItemImage: 
        width: 100,
        height: 100,
        borderWidth: 1.5, 
        borderColor: 'white',
        borderRadius: 50,
    ,
    gridItemText: 
        marginTop: 5,
        textAlign:'center',
    ,
);

更改样式以选择您想在屏幕上看到的行数。此代码是响应式的。

【讨论】：

我认为你不需要那个ScrollView。你呢？

尽管这适用于大多数移动设备，但我认为这不是最好的解决方案。因为使用这种方法，您假设屏幕的宽度小于~450。这在此刻可能是正确的，但后来，它可能不是真的。 @nikk-wong 的答案是我猜的正确方法。

【参考方案4】：

如果您想让网格视图真正响应设备宽度导入尺寸：

import 
  StyleSheet,
  Text,
  ...
  Dimensions,
 from 'react-native';

并为此更改 gridItem 宽度：

gridItem: 
  margin: 5,
  width: Dimensions.get('window').width / 2.2, //Device width divided in almost a half
  height: 150,
  justifyContent: 'center',
  alignItems: 'center',
,

您还可以将图像宽度更改为与 gridItem 相同或更少。

【讨论】：

比设置像 150 这样的任意数字要好得多，因为在具有高 dpis/比率的设备上您不会得到相同的结果。很好的答案！它更好，但您还必须检查像素比率，因为它无法在 android 上正确缩放。

【参考方案5】：

您可以使用 FlatList 并为其设置 numColumns=2 属性和 style= flexDirection: 'column' 。 就我而言，我正在使用 3 个 cols： FlatList with numColumns=3

【参考方案6】：

flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'

试着放这个！

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。