我使用简单的Text项创建一个简单的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
}
});
我使用文本的包装器视图。然后使用FlexBox将Text缩放到最大宽度并将其内容对齐到左侧。但是当Text对齐中心并包装内容时(包装视图也包装内容),结果并不像预期的那样。如何解决这个问题?
答案 0 :(得分:2)
您也可以使用Dimensions
来获取屏幕宽度并分配到text
从react-native
导入维度import { StyleSheet, Text, View, ListView, Dimensions } from "react-native";
将width
分配给text
:
itemText: {
padding: 16,
borderColor: "blue",
borderWidth: 1,
width: (Dimensions.get('window').width)
}
答案 1 :(得分:2)
只需在样式flex
上添加itemText
,例如:
itemText: {
flex: 1,
padding: 16,
borderColor: "blue",
borderWidth: 1
}
在我的模拟器中显示如下:
我希望我的回答可以帮到你..
答案 2 :(得分:0)
您可以使用react-native-easy-grid,在这种情况下设计很容易
已实施示例:
import React from "react";
import { StyleSheet, Text, View, ListView } from "react-native";
import {Col} from 'react-native-easy-grid';
// 0.1.15
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}>
<Col>
<Text style={styles.itemText}>
{rowData.title}
</Text>
</Col>
</View>
);
}}
/>
);
}
}
const styles = StyleSheet.create({
itemContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "flex-start",
borderColor: "red",
borderWidth: 1
},
itemText: {
padding: 16,
borderColor: "blue",
borderWidth: 1
}
});