Flexbox - React Native
Flexbox - React Native
我是 React Native 的新手,我正在尝试制作聊天应用程序布局。
正如您在我附加的屏幕截图中看到的那样,我希望文本框与其中的文本一样多 space。例如,如果我发送 'Hi',它应该只被拉伸到 space 'Hi' 需要的程度。
如果我发送一个长文本,那么它应该伸展并占用与该文本一样多的 space。就像它发生在几乎所有短信应用程序中一样。
文本框代码为:
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{flex: 3}}>
<Text style={styles.message}>{item.message}</Text>
</View>
<View style={{flex: 1}}>
<Image
source={require('../assets/images/check.png')}
style={styles.image}
/>
<Text style={{textAlign: 'right', color: 'white'}}>
{msToTime(item.timestamp)}
</Text>
</View>
</View>
</TouchableOpacity>
样式表
containerSent: {
flex: 1,
maxWidth: '70%',
// minWidth: '30%',
marginTop: 20,
paddingTop: 20,
paddingHorizontal: 10,
paddingBottom: 10,
borderWidth: 1,
backgroundColor: '#6F2232',
borderRadius: 20,
alignSelf: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
// justifyContent: 'flex-end',
},
message: {
color: 'white',
fontSize: 15,
fontWeight: 'bold',
textAlign: 'left',
alignSelf: 'stretch',
},
image: {
width: 15,
height: 15,
marginLeft: 20,
marginBottom: 5,
alignSelf: 'flex-end',
},
将视图样式设置为 flex: 0
以便根据需要将其作为 Maus h space。
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{ flex: 0 }}>
<Text style={styles.message}>{'q.a'}</Text>
</View>
<View style={{ flex: 0, paddingLeft: 10 }}>
<Text style={styles.message}>{'eeeee.message'}</Text>
</View>
</View>
</TouchableOpacity>
看看我的sample
我是如何实现的,我从两个元素中删除了 flex: 3 和 flex: 1,这样它们就不会扩展到最大值 space,并且我将 flexShrink: 1 添加到文本,以便它始终收缩以保持正确的元素完好无损。
我是 React Native 的新手,我正在尝试制作聊天应用程序布局。
正如您在我附加的屏幕截图中看到的那样,我希望文本框与其中的文本一样多 space。例如,如果我发送 'Hi',它应该只被拉伸到 space 'Hi' 需要的程度。 如果我发送一个长文本,那么它应该伸展并占用与该文本一样多的 space。就像它发生在几乎所有短信应用程序中一样。
文本框代码为:
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{flex: 3}}>
<Text style={styles.message}>{item.message}</Text>
</View>
<View style={{flex: 1}}>
<Image
source={require('../assets/images/check.png')}
style={styles.image}
/>
<Text style={{textAlign: 'right', color: 'white'}}>
{msToTime(item.timestamp)}
</Text>
</View>
</View>
</TouchableOpacity>
样式表
containerSent: {
flex: 1,
maxWidth: '70%',
// minWidth: '30%',
marginTop: 20,
paddingTop: 20,
paddingHorizontal: 10,
paddingBottom: 10,
borderWidth: 1,
backgroundColor: '#6F2232',
borderRadius: 20,
alignSelf: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
// justifyContent: 'flex-end',
},
message: {
color: 'white',
fontSize: 15,
fontWeight: 'bold',
textAlign: 'left',
alignSelf: 'stretch',
},
image: {
width: 15,
height: 15,
marginLeft: 20,
marginBottom: 5,
alignSelf: 'flex-end',
},
将视图样式设置为 flex: 0
以便根据需要将其作为 Maus h space。
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{ flex: 0 }}>
<Text style={styles.message}>{'q.a'}</Text>
</View>
<View style={{ flex: 0, paddingLeft: 10 }}>
<Text style={styles.message}>{'eeeee.message'}</Text>
</View>
</View>
</TouchableOpacity>
看看我的sample
我是如何实现的,我从两个元素中删除了 flex: 3 和 flex: 1,这样它们就不会扩展到最大值 space,并且我将 flexShrink: 1 添加到文本,以便它始终收缩以保持正确的元素完好无损。