我有一个登录按钮,我想将登录文本放置在按钮的中心,并将图像(适当缩放)放置在按钮的右边缘,远离文本。
目前,我通过以下方式使用矢量图标库中的图标:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', paddingLeft: '46%' }}>Login</Text>
<Icon name="arrow-right" color='#fff' size={15} style={{ paddingLeft: '33%' }} />
</View>
</TouchableOpacity>
这可能也不是最好的方法。现在我想用图像替换图标,所以我编写了以下代码:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', flex: 0.9 }}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{ height: 10 }} />
</View>
</TouchableOpacity>
这样,图像会缩放并以某种方式放置在右侧,但它不再水平对齐(我不明白为什么)。
有人知道实现我想要的风格的最佳方法吗?
最佳答案
像这样使用它:
<TouchableOpacity style={{flexDirection:"row",alignItems:'center',justifyContent:'center'}}>
<Text style={{flex:.8}}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{flex:.2 }} />
</TouchableOpacity>
关于css - 如何在 TouchableOpacity 中插入文本和图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55373090/