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 仅显示有限的字符。我尝试了很多解决方案,但没有任何效果。 android和ios都出现了同样的问题。 请帮我解决这个问题。
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? 你能分享你的代码和你看到的屏幕吗? 这是我的代码片段。嗨@Nitish 我现在可以运行相同的代码了。在滚动上我可以看到全文。小吃.expo.io/n93fqzqgG
您只需要添加样式和<SafeAreaView />
作为父级。以下是我的工作代码
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中的多行文本中断后确定“更多”链接/按钮的位置
带有 Typescript 的 React-Native 自定义文本组件:“将 React.ReactNode 类型转换为文本类型......”