React-Native 文本无缘无故被垂直切断

Posted 2023-02-16

【中文标题】React-Native 文本无缘无故被垂直切断

【英文标题】：React-Native text get's vertically cut off for no reason

【发布时间】：2018-11-03 19:11:23

【问题描述】：

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

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 或将其删除，它不会被切断。 基本上，当我开始随机删除内容时，事情开始以奇怪的方式影响其他元素。

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

【问题讨论】：

我的第一个猜测是它与“flex”有关，并且该元素被缩小了。您是否尝试在该文本周围的视图中添加“flex-shrink：0”？

你应该在视图中添加一些填充

【参考方案1】：

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

这是一个目前尚未解决的已知问题。为它创建的 first issue 已关闭，但当前有 another issue 处于打开状态。使用边距会改变视图，弄乱你的其他样式。我发现一个有用的解决方法是声明百分比的全局值。我正在使用 react-native-extended-stylesheets，这看起来像：

ESS.build(
    $1ph: Dimensions.get('window').height / 100, // 1 percent of the window height
    $1pw: 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('$1ph * 3') ]>
  <Text style=styles.itemHeaderText>Cut off Text????</Text>
</View>

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

【参考方案2】：

<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

【讨论】：

非常有趣，不错的收获！你知道为什么会这样吗？向View 添加填充通常是不好的做法吗？

在 View 上设置填充没有问题。该问题是由百分比值作为边距引起的，这会压缩视图。将边距从 5% 更改为 Dimensions.get('window').width / 20 也可以解决此问题。虽然在这里向内部文本组件添加填充也更有意义。