React Native ScrollView 包装复杂元素答案

【问题标题】：React Native ScrollView Wrapping for Complex ElementsReact Native ScrollView 包装复杂元素
【发布时间】：2021-02-09 04:00:30
【问题描述】：

我有一个ScrollView，我在其中列出了一些Components。到目前为止，我只在ScrollView 中放置了一个大的Text 组件，它的包装很好。但是现在我创建了一个新的Component（在本例中为ComplexText），包装有点偏离。（ComplexText 组件被适当地列出了，只是长消息的包装有点滑稽，而且每行包装的最后几个字符从屏幕上掉下来。

这是我的代码的基本形式：

import React, { ReactElement } from "react";
import {ScrollView, View, Text} from "react-native";

interface TextProps {
    person: string,
    message: string;
}

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flexDirection: "row"}}>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20}}>{message}</Text>
        </View>
    );
};

const ScrollingComplexText = () : ReactElement => {
    return (
        <>
            <View style={{flex:0.05}} key={"status-bar-background"}/>
            <ScrollView style={{backgroundColor: "lightblue"}} key={"scrolling-messages"}>
                <ComplexText person={"Samantha"} message={"Hello Anthony."} />
                <ComplexText person={"Anthony"} message={"Hello Samantha."} />
                <ComplexText person={"System"} message={"User Jonathan has joined the chat, say something to welcome him."} />
                <ComplexText person={"Anthony"} message={"Hello Jonathan."} />
                <ComplexText person={"Samantha"} message={"Hello Jonathan."} />
                <ComplexText person={"Jonathan"} message={"Hello everybody."} />
            </ScrollView>
        </>
    );
};

export default ScrollingComplexText;

这是问题的屏幕截图（如您所知，something 的大部分单词都被切断了）：

编辑我也尝试使用FlatList 执行此操作，但我看到的内容完全相同：

import React, { ReactElement } from "react";
import {View, Text, FlatList} from "react-native";

interface TextProps {
    person: string,
    message: string;
}

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flexDirection: "row"}}>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20}}>{message}</Text>
        </View>
    );
};

const messageJson = [
    {
        person: "Samantha",
        message: "Hello Anthony."
    },{
        person: "Anthony",
        message: "Hello Samantha."
    },{
        person: "System",
        message: "User Jonathan has joined the chat, say something to welcome him."
    },{
        person: "Anthony",
        message: "Hello Jonathan."
    },{
        person: "Samantha",
        message: "Hello Jonathan."
    },{
        person: "Jonathan",
        message: "Hello Everybody."
    }
];

const ScrollingComplexText = () : ReactElement => {

    const renderItem = ({item} : {item: TextProps}) => (
        <ComplexText person={item.person} message={item.message} />
    );

    return (
        <>
            <View style={{flex:0.05}} key={"status-bar-background"}/>
            <FlatList
                style={{backgroundColor: "lightblue"}}
                data={messageJson}
                renderItem={renderItem} />
        </>
    );
};

export default ScrollingComplexText;

【问题讨论】：

标签： reactjs typescript react-native mobile react-tsx

【解决方案1】：

试试这个方法

<ScrollView key={"scrolling-messages"}>
   <View style={{flex:1, backgroundColor: "lightblue"}}>
      <ComplexText person={"Samantha"} message={"Hello Anthony."} />
      ......
   </View>
</ScrollView>

还有这个

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flex:1, flexDirection: "row"}}> <-- add flex:1 here -->
            <Text textBreakStrategy={"simple"} style={{fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20}}>{message}</Text>
        </View>
    );
};

【讨论】：

嗯。我试过这个，它似乎没有解决问题。我仍然看到部分文字被屏幕截断。以防万一我错过了什么，我会提到我改变了什么。但是我将flex: 1 添加到ComplexText View 中，并且我还在ScrollView 中添加了View，它现在包含所有ComplexText 组件。
尝试在滚动视图中添加 contentContainerStyle={{flex:1 }} 然后检查
这似乎也不起作用。它增加了很多垂直间距，但文本仍然被截断。
可能是fontWeight的问题，请尝试去掉fontWeight再试试
摆脱了fontWeight 仍然没有运气。 :(

【解决方案2】：

我找到了解决这个问题的方法：

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flexDirection: "row"}}>
            <Text textBreakStrategy={"simple"} style={{flex: 0.2, fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{flex: 0.8, fontSize: 20}}>{message}</Text>
        </View>
    );
};

如果不清楚我添加了什么，我需要为我的ComplexText 组件中的每个单独的Text 组件添加一些flex 属性。

【讨论】：