React-Native 文本无故被垂直截断

Question

我的文本出现了一个有趣的错误。出于某种原因，文本随机被截断，如下所示：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    backgroundColor: "#ecf0f1",
    width:"100%",
    paddingTop:"5%"
  },
  itemContainer: {
    backgroundColor:"#fff",
    margin:"5%",
    marginTop: 0,
    borderRadius:5,
    width: "90%"
  },
  itemHeaderContainer: {
    padding:15,
    borderColor: "#E4E2E9",
    borderBottomWidth: 1
  },
  itemHeaderText: {
    height:'auto',
    color:"#333",
    fontSize: 23,
    fontWeight: "800",
  },
  itemButtonContainer: {padding:13, flexWrap: 'wrap',  alignItems: 'flex-start', flexDirection:'row'},
  itemButtonText: { fontSize:19, color:"#fff", fontWeight:"800" },
  itemCreateButton: { backgroundColor:"#3F61E7", borderRadius: 5, paddingVertical:10, paddingHorizontal:15},
});

renderTemplate() {
  if(this.state.loaded) {
    return (
      <View style={{width:"100%"}}>

      <View style={styles.itemContainer}>
        <View style={[styles.itemHeaderContainer, {borderBottomWidth: 0}]}>
          <Text style={styles.itemHeaderText}>{this.state.task_data.title}</Text>
          <Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 1</Text> 
          <Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 2</Text>
          <Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 3</Text> 
          <Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 4</Text> 
          <Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 5</Text> 
        </View>
      </View>

      <View style={[styles.itemContainer, {padding:15}]}>
        <Text style={[styles.itemHeaderText, {}]}>Cut off Text????</Text>
      </View>

      <View style={styles.itemContainer}>
        <View style={styles.itemHeaderContainer}>
          <Text style={styles.itemHeaderText}>Another Section</Text>
        </View>
        <View style={styles.itemButtonContainer}>
            <TouchableHighlight underlayColor='#3F61E7' style={[styles.itemCreateButton, {marginRight: 10}]}>
              <View style={{flexWrap: 'wrap',  alignItems: 'flex-start', flexDirection:'row'}}>
                <Text style={styles.itemButtonText}>Button 1</Text>
              </View>
            </TouchableHighlight>

             <TouchableHighlight underlayColor='#3F61E7' style={styles.itemCreateButton}>
              <View style={{flexWrap: 'wrap',  alignItems: 'flex-start', flexDirection:'row'}}>
                <Text style={styles.itemButtonText}>Button 2</Text>
              </View>
            </TouchableHighlight>
        </View>
      </View>

      <View style={styles.itemContainer}>
        <View style={styles.itemHeaderContainer}>
          <Text style={styles.itemHeaderText}>Existing Documents</Text>
        </View>
        
        <FlatList data={this.state.task_documents} style={{ paddingBottom:10, paddingHorizontal:0 }} renderItem={
          ({item}) => (

            <View style={{ borderBottomWidth:1, borderColor:"#F1F0F3"}}>
              <View style={[{flexGrow:1, paddingHorizontal:5, flex:1, }]}>
                <Text numberOfLines={1} ellipsizeMode='tail' style={{ flexShrink: 1, fontSize:24, fontWeight:"600",}}>{item.value.title || "No Title"}</Text>
              </View>
            </View>
          )
        } />
      </View>

      </View>
    );
  }
  else return (
    <View style={styles.itemContainer}>
      <View style={[styles.itemHeaderContainer, {borderBottomWidth: 0}]}>
        <Text style={styles.itemHeaderText}>Loading item..</Text>
      </View>
    </View>
  );
}

render() {
  return (
    <ScrollView>
      <View style={styles.container}>
        {this.renderTemplate()}          
      </View>
    </ScrollView>
  );
}

有趣的是，我在测试任务下放置的行越多，它被截断的次数就越多。

如果我将所有内容从 renderTemplate() 移动到 render()，它不会被切断
如果我完全删除这些行，文本不会被截断。
如果我将 FlatList return 替换为 null 或删除它，它不会被切断。
基本上当我开始随机删除内容时，事情开始以奇怪的方式影响其他元素。

其他人遇到过这种情况吗？难道我做错了什么？接受任何和所有建议。

Answer 1

<View style={[styles.itemContainer, { padding: 15 }]}>
  <Text style={styles.itemHeaderText}>Cut off Text????</Text>
</View>

填充应应用于 Text 组件而不是 View 容器：

<View style={styles.itemContainer}>
  <Text style={[styles.itemHeaderText, { padding: 15 }]}>Cut off Text????</Text>
</View>

工作代码：https://snack.expo.io/Hkn9YIC17

Answer 2

正如@riwu 所说，这个问题是由于将百分比值作为边距，压缩了视图。我很好奇这到底是什么意思，所以我调查了一下。

这是一个目前尚未解决的已知问题。此 first issue created for it was closed, but there is another issue 当前打开。使用边距会改变视图，弄乱你的其他样式。我发现有用的解决方法是声明百分比的全局值。我正在使用 react-native-extended-stylesheets，这看起来像：

ESS.build({
    ph: Dimensions.get('window').height / 100, // 1 percent of the window height
    pw: Dimensions.get('window').width / 100, // 1 percent of the window width
});

您需要在设备加载时计算它，然后您可以在整个应用程序中使用它：

// Import react-native-extended-stylesheets
import ESS from 'react-native-extended-stylesheets';

// the margin will now be 3% of the device height
<View style={[styles.itemContainer, { padding: ESS.value('ph * 3') }]}>
  <Text style={styles.itemHeaderText}>Cut off Text????</Text>
</View>

请注意，您需要正确处理任何方向更改才能重新计算宽度和高度。

Answer 3

你可以直接给文字加上行高，这里你的fontSize是23，那么你应该使用27或28的行高，基本上行高应该多4-5个像素比你的文字更适合我

React-Native 文本无故被垂直截断

React-Native text gets vertically cut off for no reason

javascript

react-native

react-native-flatlist