React-Native 长文本最后消失

Posted

技术标签:

【中文标题】React-Native 长文本最后消失【英文标题】:React-Native long text disapper at the end 【发布时间】:2021-02-24 03:40:53 【问题描述】:

我正在使用 React-Native 版本 0.60.0。 组件没有显示完整的长文本,例如超过 5000 个字符。 React Native 仅显示有限的字符。我尝试了很多解决方案,但没有任何效果。 androidios都出现了同样的问题。 请帮我解决这个问题。

screenshot

完整代码-

class App extends Component 
  render() 

    let epiComment = "the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19, data to date suggest that 80% of infections are mild or asymptomatic, 15% are severe infections, requiring oxygen, and 5% are critical infections, requiring ventilation. these fractions of severe and critical infection would be higher than those observed for influenza infection. those most at risk of severe influenza infection are children, pregnant women, the elderly, people with underlying chronic diseases and immunocompromised individuals. for covid-19, our current understanding is that advanced age and underlying conditions increase the risk of severe infection. the people most at risk of influenza infection the rate of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19 virus is estimated to be 5-6 days, while for influenza virus the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19. in addition, transmission during the first 3-5 days of illness, or potentially presymptomatic transmission - transmission of the virus before the onset of symptoms - is an important factor in the transmission of influenza. on the other hand, although we are learning that some people may shed the covid-19 virus 24 to 48 hours before the onset of symptoms, this does not appear to be a major factor in transmission at this time.(the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.************"
    return (     
        <ScrollView >
        <Text>
          epiComment
        </Text>
        </ScrollView>
    );
  

【问题讨论】:

这能回答你的问题吗? React native text going off my screen, refusing to wrap. What to do? 你能分享你的代码和你看到的屏幕吗? 这是我的代码片段。 我的长文本在这里......xxx......xxxx...... React native 直到最后一个字才显示。 @Nitish 因为我们共享同名。所以我问得很清楚。您能否分享您的问题的完整代码和屏幕截图,那么只有我和我认为其他任何人都可以帮助您。 @Nitish 我已经更新了帖子。你可以查看完整的代码和截图。 【参考方案1】:

嗨@Nitish 我现在可以运行相同的代码了。在滚动上我可以看到全文。小吃.expo.io/n93fqzqgG

您只需要添加样式和&lt;SafeAreaView /&gt; 作为父级。以下是我的工作代码

import * as React from 'react';
import  Text, View, StyleSheet, ScrollView, SafeAreaView  from 'react-native';
import Constants from 'expo-constants';

export default function App() 
  let epiComment = "the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19, data to date suggest that 80% of infections are mild or asymptomatic, 15% are severe infections, requiring oxygen, and 5% are critical infections, requiring ventilation. these fractions of severe and critical infection would be higher than those observed for influenza infection. those most at risk of severe influenza infection are children, pregnant women, the elderly, people with underlying chronic diseases and immunocompromised individuals. for covid-19, our current understanding is that advanced age and underlying conditions increase the risk of severe infection. the people most at risk of influenza infection the rate of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19 virus is estimated to be 5-6 days, while for influenza virus the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19. in addition, transmission during the first 3-5 days of illness, or potentially presymptomatic transmission - transmission of the virus before the onset of symptoms - is an important factor in the transmission of influenza. on the other hand, although we are learning that some people may shed the covid-19 virus 24 to 48 hours before the onset of symptoms, this does not appear to be a major factor in transmission at this time.(the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.************"
    return (
        <SafeAreaView style=styles.container> 
          <ScrollView >
            <Text>
              epiComment
            </Text>
          </ScrollView>
        </SafeAreaView>
    );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    margin: 8,
  ,
);

【讨论】:

您正在使用哪个反应原生版本?我在 RN 0.60.0 上有问题。相同的代码在新版本中运行良好。 我在snack.expo.io 上测试过,它适用于最新版本。 请尝试使用 RN 0.60.0 版本运行,然后让我知道它是否有效。谢谢 以上代码不工作。同样的问题仍然出现 android 和 iOS 的实际问题是什么,你能描述和分享截图吗?【参考方案2】:

尝试这样做

<View style=flexDirection:'row'> 
   <Text style=flex: 1, flexWrap: 'wrap'> Your text here...</Text>
</View>

【讨论】:

以上是关于React-Native 长文本最后消失的主要内容,如果未能解决你的问题,请参考以下文章

React-Native ScrollView 使 TextInput 消失

如何在react-native中的多行文本中断后确定“更多”链接/按钮的位置

RN 安卓输入框TextInput闪一下消失

带有 Typescript 的 React-Native 自定义文本组件:“将 React.ReactNode 类型转换为文本类型......”

React-Native做一个文本输入框组件

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