React native -文本未换行/收缩
React native -文本未换行/收缩
提问于 2020-09-16 18:13:15
我有一些文本溢出了我的容器视图。我希望将图片中显示的单词移到第二行。我尝试过类似帖子中提出的textShrink，但它不起作用，所以我一定是在父视图中做错了什么？你能看见吗？
<View style={styles.container}>
<ScrollView style={styles.scrollview}>
(...)
<View style={styles.line}>
<View style={[styles.bubble2,{}]}>
<Text style={{color:'white', fontSize:18, flexShrink:1}}>{strings('profilescreen.birthday')}</Text>
</View>
<Text style={styles.maintext}>{userInfo.birthday}</Text>
</View>
(...)
</ScrollView>
</View>样式：
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.pointo,
paddingTop: Constants.statusBarHeight+10,
},
bubble2:{
height: 40,
width:130,
borderRadius:25,
backgroundColor: Colors.pointosecondary,
paddingHorizontal:20,
alignSelf:'flex-start',
alignItems:'center',
justifyContent:'center',
marginHorizontal:5,
flexDirection:'column',
},
scrollview:{
backgroundColor:'#fFF',
height:'100%',
paddingTop:10,
},
line:{
height:50,
flexDirection:'row',
alignItems:'center',
paddingHorizontal:20,
paddingTop:15,
flex:1,
},
maintext:{
color:'gray',
fontSize:16,
paddingLeft:20,
},
})Stack Overflow用户
发布于 2020-09-16 18:23:15
使用flexWrap
按如下方式更新文本组件样式：
<Text style={{color:'white', fontSize:18, flexShrink:1, flexWrap: 'wrap'}}>
{strings('profilescreen.birthday')}
</Text> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63917833
复制相关文章
相似问题
腾讯云开发者
