Текст, основанный на реакторе, может быть отключен по вертикали без причины
У меня есть интересная ошибка, которая происходит с моим текстом. По какой-то причине текст случайным образом обрезается так:
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>
);
}
Интересно, что чем больше Line я ставится в Testing Task, тем больше он обрезается.
- Если я
renderTemplate()
все из renderTemplate()
в render()
, он не обрезается - Если я полностью удалю строки, текст не будет отключен.
- Если заменить FlatList на null или удалить его, он не будет отключен.
- В основном, когда я начинаю делать случайную абстракцию содержимого, вещи начинают влиять на другие элементы странными способами.
Это когда-нибудь случалось с кем-то еще? Я делаю что-то неправильно? Открыта для любых предложений.
Ответы
Ответ 1
<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>
Рабочий код: https://snack.expo.io/Hkn9YIC17