如何解决对复杂元素进行本机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
属性。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。