css - 如何在 TouchableOpacity 中插入文本和图像？

Question

我有一个登录按钮，我想在按钮的中心放置一个登录文本，并在按钮的右边缘放置一个图像(适当缩放)，远离文本。

目前我通过以下方式使用 Vector Icons 库中的图标:

<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>

这样图像缩放并以某种方式放置在右侧但它不再水平对齐(我不明白为什么)。

有人知道实现我正在寻找的风格的最佳方法吗？

Answer 1

像这样使用它:

<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>