固定线条在中间缩放的工作表中的位置
固定线条在中间缩放的工作表中的位置
提问于 2020-06-18 16:40:58
我这样做是为了在两个数字之间画一条垂直线：
<View style={styles.ridesFriends}>
<Text style={styles.numbers}>132</Text>
<View style={styles.verticleLine}></View>
<Text style={styles.numbers}>2</Text>
</View>
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
}但是，这条线不会出现在正中间。这是因为132比数字2长，如果我把132改成3，那么这条线就会出现在中间。有没有办法把中间那条线修好？
更新：
<View style={styles.ridesFriends}>
{/* <View style={styles.numbersContainer}> */}
<Text style={styles.numbers}>132</Text>
<View style={styles.verticleLine}></View>
<Text style={styles.numbers}>{numberOfFriends}</Text>
{/* </View> */}
</View>
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbersContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
num1: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
borderRightWidth: 1,
borderColor: '#909090',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: '900',
textShadowColor: '#000000',
textShadowRadius: 0.5,
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#E0E0E0',
//position: 'fixed',
},回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-19 01:19:58
由于您已将父对象的宽度设置为100%，因此您可以轻松地将数字文本包装到视图中，并分别设置为50%。代码如下所示
<View style={styles.ridesFriends}>
<View style={styles.numberWrap}>
<Text style={styles.numbers}>132</Text>
</View>
<View style={styles.verticleLine}></View>
<View style={styles.numberWrap}>
<Text style={styles.numbers}>2</Text>
</View>
</View>样式
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
},
numberWrap: {
width: '50%',
alignItems: 'center',
},Stack Overflow用户
发布于 2020-06-18 17:06:13
您可以在文本之外添加View组件，并使用flex: 1对其设置样式，以使Text组件的分隔间距相等。
然后，可以在文本容器视图中添加{alignItems: 'center',justifyContent: 'center'}以存档组件
试试我的：
<View style={styles.ridesFriends}>
<View style={styles.numbersContainer}>
<Text style={styles.numbers}>132</Text>
</View>
<View style={styles.verticleLine}></View>
<View style={styles.numbersContainer}>
<Text style={styles.numbers}>2</Text>
</View>
</View>
ridesFriends: {
paddingTop: 70,
alignItems: 'center',
flexDirection: 'row',
width: '100%',
marginBottom: 20,
},
numbersContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
},
希望对您有所帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62445848
复制相关文章
相似问题
腾讯云开发者
