对复杂元素进行 React Native ScrollView 包装

Question

我有一个 ScrollView，我在其中列出了几个 Component。到目前为止，我只在 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;

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

Answer 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 属性。

对复杂元素进行 React Native ScrollView 包装

React Native ScrollView Wrapping for Complex Elements

mobile

typescript

reactjs

react-native

react-tsx