J'ai un bug intéressant qui arrive à mon texte. Pour une raison quelconque, le texte est coupé au hasard comme suit:
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>
);
}
Chose intéressante, plus je mets de ligne sous la tâche de test, plus elle est coupée.
renderTemplate()
vers render()
, il ne sera pas coupéEst-ce jamais arrivé à quelqu'un d'autre? Est-ce que je fais quelque chose de mal? Ouvert à toutes les suggestions.
<View style={[styles.itemContainer, { padding: 15 }]}>
<Text style={styles.itemHeaderText}>Cut off Text????</Text>
</View>
Le remplissage doit être appliqué au composant Text
au lieu du conteneur View
:
<View style={styles.itemContainer}>
<Text style={[styles.itemHeaderText, { padding: 15 }]}>Cut off Text????</Text>
</View>
Code de travail: https://snack.expo.io/Hkn9YIC17