以下代码使用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%'
}
});
3条答案
按热度按时间wn9m85ua1#
使用View(带有
justifyContent: 'center'
)代替DataTable.Cell来实现多行单元格图片来源:https://github.com/callstack/react-native-paper/issues/2381#issuecomment-734155600
pvabu6sv2#
我得到同样的问题,经过大搜索我干脆放弃这个想法,并开始使用。
https://github.com/GeekyAnts/react-native-easy-grid/
是真正简单的构造相同的结构,像一个表,后o只需要设置边框,如果你想,并完成,简单和容易像Html。
4nkexdtk3#
您可以使用css属性:打你手机。
示例: