javascript - React-Native 文本无缘无故被垂直切断
问题描述
我的文本发生了一个有趣的错误。由于某种原因,文本被随机截断,如下所示:
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
backgroundColor: "#ecf0f1",
width:"100%",
paddingTop:"5%"
},
itemContainer: {
backgroundColor:"#fff",
margin:"5%",
marginTop: 0,
borderRadius:5,
width: "90%"
},
itemHeaderContainer: {
padding:15,
borderColor: "#E4E2E9",
borderBottomWidth: 1
},
itemHeaderText: {
height:'auto',
color:"#333",
fontSize: 23,
fontWeight: "800",
},
itemButtonContainer: {padding:13, flexWrap: 'wrap', alignItems: 'flex-start', flexDirection:'row'},
itemButtonText: { fontSize:19, color:"#fff", fontWeight:"800" },
itemCreateButton: { backgroundColor:"#3F61E7", borderRadius: 5, paddingVertical:10, paddingHorizontal:15},
});
renderTemplate() {
if(this.state.loaded) {
return (
<View style={{width:"100%"}}>
<View style={styles.itemContainer}>
<View style={[styles.itemHeaderContainer, {borderBottomWidth: 0}]}>
<Text style={styles.itemHeaderText}>{this.state.task_data.title}</Text>
<Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 1</Text>
<Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 2</Text>
<Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 3</Text>
<Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 4</Text>
<Text style={{ marginTop:10, fontSize:18, color:"#333", fontWeight:"400" }}>Line 5</Text>
</View>
</View>
<View style={[styles.itemContainer, {padding:15}]}>
<Text style={[styles.itemHeaderText, {}]}>Cut off Text????</Text>
</View>
<View style={styles.itemContainer}>
<View style={styles.itemHeaderContainer}>
<Text style={styles.itemHeaderText}>Another Section</Text>
</View>
<View style={styles.itemButtonContainer}>
<TouchableHighlight underlayColor='#3F61E7' style={[styles.itemCreateButton, {marginRight: 10}]}>
<View style={{flexWrap: 'wrap', alignItems: 'flex-start', flexDirection:'row'}}>
<Text style={styles.itemButtonText}>Button 1</Text>
</View>
</TouchableHighlight>
<TouchableHighlight underlayColor='#3F61E7' style={styles.itemCreateButton}>
<View style={{flexWrap: 'wrap', alignItems: 'flex-start', flexDirection:'row'}}>
<Text style={styles.itemButtonText}>Button 2</Text>
</View>
</TouchableHighlight>
</View>
</View>
<View style={styles.itemContainer}>
<View style={styles.itemHeaderContainer}>
<Text style={styles.itemHeaderText}>Existing Documents</Text>
</View>
<FlatList data={this.state.task_documents} style={{ paddingBottom:10, paddingHorizontal:0 }} renderItem={
({item}) => (
<View style={{ borderBottomWidth:1, borderColor:"#F1F0F3"}}>
<View style={[{flexGrow:1, paddingHorizontal:5, flex:1, }]}>
<Text numberOfLines={1} ellipsizeMode='tail' style={{ flexShrink: 1, fontSize:24, fontWeight:"600",}}>{item.value.title || "No Title"}</Text>
</View>
</View>
)
} />
</View>
</View>
);
}
else return (
<View style={styles.itemContainer}>
<View style={[styles.itemHeaderContainer, {borderBottomWidth: 0}]}>
<Text style={styles.itemHeaderText}>Loading item..</Text>
</View>
</View>
);
}
render() {
return (
<ScrollView>
<View style={styles.container}>
{this.renderTemplate()}
</View>
</ScrollView>
);
}
有趣的是,我在测试任务下放置的线越多,它就越被切断。
- 如果我将所有内容从
renderTemplate()
to移动render()
,它不会被切断 - 如果我完全删除这些行,则文本不会被截断。
- 如果我将 FlatList return 替换为 null 或将其删除,它不会被切断。
- 基本上,当我开始随机删除内容时,事情开始以奇怪的方式影响其他元素。
这种情况发生在其他人身上吗?难道我做错了什么?接受任何和所有建议。
解决方案
<View style={[styles.itemContainer, { padding: 15 }]}>
<Text style={styles.itemHeaderText}>Cut off Text????</Text>
</View>
填充应该应用于Text
组件而不是View
容器:
<View style={styles.itemContainer}>
<Text style={[styles.itemHeaderText, { padding: 15 }]}>Cut off Text????</Text>
</View>
推荐阅读
- ios - 应用程序构建在物理设备上,但不是模拟器(没有这样的模块)
- django - “元组”对象在 UpdateView 上没有“有序”属性
- boolean - 布尔代数中“互斥”项的含义是什么?
- django - django.core.exceptions.ImproperlyConfigured:SECRET_KEY 设置不能为空:import model
- keras - Kera 的 ImageDataGenerator 随机崩溃
- csh - 使用 foreach 路径的标准工具的 C Shell“找不到命令”
- c++ - 为什么编译器不能从 std::make_shared 推导出模板参数?
- powershell - PowerShell - 自动注释标题
- powershell - Powershell 命令不会读取 XML
- node.js - 如何使用承诺的节点 exec 将文本传送到命令中