React原生论文DataTable.Cell溢出文本导致隐藏全文

问题描述 投票:0回答:2

下面的代码使用

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%'
    }
  });
react-native react-native-paper
2个回答
3
投票

使用视图(带有

justifyContent: 'center'
)而不是DataTable.Cell来实现多行单元格

来源:https://github.com/callstack/react-native-paper/issues/2381#issuecomment-734155600


2
投票

我遇到了同样的问题,经过大搜索我干脆放弃了这个想法并开始使用。

https://github.com/GeekyAnts/react-native-easy-grid/

构造相同的结构真的很简单,就像一个表格,之后只要你想设置边框就可以了,就像Html一样简单易行

© www.soinside.com 2019 - 2024. All rights reserved.