Блог

Главная - Вопросы по программированию - Обтекание встроенного ScrollView для сложных элементов

Обтекание встроенного ScrollView для сложных элементов

#reactjs #typescript #react-native #mobile #react-tsx

#reactjs #typescript #react-native #Мобильный #react-tsx

Вопрос:

У меня есть a ScrollView , и я перечисляю Component в нем несколько s. До сих пор я добавлял только один большой 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;

И вот скриншот проблемы (как вы можете заметить, большая часть word something обрезается):
введите описание изображения здесь

Редактировать Я также пытался сделать это с помощью a 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;

Ответ №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>
    );
};

Комментарии:

1.Хммм. Я попробовал это, и, похоже, это не решает проблему. Я все еще вижу, как части слов исчезают с экрана. На всякий случай, если я что-то пропустил, я упомяну, что я изменил. Но я добавил flex: 1 в ComplexText View , и я также добавил View в ScrollView , который теперь содержит все ComplexText компоненты.

2. Попробуйте добавить contentContainerStyle={{flex:1}} в scrollview, затем проверьте

3. Похоже, это тоже не работает. Это добавляет много вертикальных интервалов, но текст по-прежнему обрезается.

4. Может быть из-за веса шрифта, попробуйте удалить FontWeight, а затем попробуйте

5. Избавился от 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>
    );
};

Если неясно, что я добавил, мне нужно было добавить некоторые flex свойства к каждому из отдельных Text компонентов в моем ComplexText компоненте.