对复杂元素进行本机ScrollView包装

问题描述

我有一个ScrollView，并且其中列出了几个Component。到目前为止，我只在Text中放了一个大的ScrollView组件，它包装得很好。但是，既然我已经创建了一个新的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,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."
    },message: "Hello Jonathan."
    },{
        person: "Samantha",{
        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;

解决方法

尝试这种方式

<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>
    );
};

,

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

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>
    );
};

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