gpt4 book ai didi

listview - react native : ListView item does not scale full width

转载 作者:行者123 更新时间:2023-12-02 00:43:20 27 4
gpt4 key购买 nike

我用一个简单的文本项创建了一个简单的 ListView 组件。

import React from "react";
import { StyleSheet, Text, View, ListView } from "react-native";

export default class NoteList extends React.Component {
constructor(props) {
super(props);
this.ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => {
r1 !== r2;
}
});
}

render() {
return (
<ListView
dataSource={this.ds.cloneWithRows([
{ title: "Note 1", body: "Body 1", id: 1 },
{ title: "Note 2", body: "Body 2", id: 2 }
])}
renderRow={rowData => {
return (
<View style={styles.itemContainer}>
<Text style={styles.itemText}>
{rowData.title}
</Text>
</View>
);
}}
/>
);
}
}

const styles = StyleSheet.create({
itemContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "flex-start",
borderColor: "red",
borderWidth: 1
},

itemText: {
padding: 16,
borderColor: "blue",
borderWidth: 1
}
});

我为文本使用包装 View 。然后使用 FlexBox 将文本缩放到全宽并将其内容左对齐。但是当文本居中对齐并包装内容(包装 View 也包装内容)时,结果并不像预期的那样。如何解决这个问题?

最佳答案

您也可以使用 Dimensions 获取屏幕宽度并分配给 text

从 react-native 导入维度

import { StyleSheet, Text, View, ListView, Dimensions } from "react-native";

宽度分配给文本:

itemText: {
padding: 16,
borderColor: "blue",
borderWidth: 1,
width: (Dimensions.get('window').width)
}

关于listview - react native : ListView item does not scale full width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45368761/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com