下面的代码使用
DataTable.Cell
.
如果文本大于列宽它隐藏文本
如果文本大于列宽需要在下一行中断文本,请帮助需要显示文本。
<DataTable.Row
style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
<DataTable.Cell
style={{
flex: 3,
flexWrap: 'wrap',
borderColor: 'yellow',
borderWidth: 2,
height: auto,
overflow: 'visible',
}}>
<View style={styles.rowbox}>
<Text style={styles.stnname}>Test 1</Text>
<Text>Day:1</Text>
<Text>Distance:0</Text>
</View>
</DataTable.Cell>
<DataTable.Cell numeric>Cell 1 2</DataTable.Cell>
<DataTable.Cell numeric>Cell 1 3</DataTable.Cell>
</DataTable.Row>
<DataTable.Row
style={{ flex: 1, flexWrap: 'wrap', paddingLeft: 1, borderColor: 'green', borderWidth: 2 }}>
<DataTable.Cell
style={{
flex: 3,
flexWrap: 'wrap',
borderColor: 'yellow',
borderWidth: 2,
height: auto,
overflow: 'visible',
}}>
<View style={styles.rowbox}>
<Text style={styles.stnname}>Test 2 Test 2 Test 2</Text>
<Text>Day:1</Text>
<Text>Distance:0</Text>
</View>
</DataTable.Cell>
<DataTable.Cell numeric>Cell 2 2</DataTable.Cell>
<DataTable.Cell numeric>Cell 2 3</DataTable.Cell>
</DataTable.Row>
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
marginTop: 20,
zIndex:1
},
autocompleteContainer: {
flex: 1,
},
descriptionContainer: {
flex: 1,
justifyContent: 'center',
width:'100%',
alignItems: 'stretch'
},
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 6,
color: '#000',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
autodropsection:{
backgroundColor: "#fff",
flex:1,
},
containerMain: {
flex: 1,
padding: 0,
marginTop: 0,
},
datrow1:{
flex: 4,
flexDirection: 'column',
},
tableheader:{
backgroundColor : "#2375b3",
color:'#ffffff',
fontSize: 24,
fontWeight: '700',
flex: 2,
},
tableheadertitle:{
fontSize: 14,
fontWeight: '500',
color:'#fff',
textAlign:"center"
},
tableheadercell:{
color:"#fff",
fontSize:24,
},
cell:{
color:'#fff',
fontSize:24,
flexDirection:'column'
},
stnname:{
fontSize: 12,
fontWeight: '700',
color:'#333',
textAlign:"left",
flexWrap:'wrap',
alignContent:'flex-start'
},
rowbox:{
paddingTop:10,
paddingBottom:10,
paddingLeft:0,
paddingRight:0,
flexDirection:'column',
textAlign:'left',
justifyContent:'flex-start',
flex: 1,
borderWidth:2,
borderColor:'red',
flexWrap:'wrap',
width:'100%'
}
});
使用视图(带有
justifyContent: 'center'
)而不是DataTable.Cell来实现多行单元格
来源:https://github.com/callstack/react-native-paper/issues/2381#issuecomment-734155600
我遇到了同样的问题,经过大搜索我干脆放弃了这个想法并开始使用。
https://github.com/GeekyAnts/react-native-easy-grid/
构造相同的结构真的很简单,就像一个表格,之后只要你想设置边框就可以了,就像Html一样简单易行