Как вставить текст и изображение в TouchableOpacity?

#css #react-native

Вопрос:

У меня есть кнопка входа, и я хотел бы разместить текст для входа в систему в центре кнопки, а изображение (правильно его масштабируя) — на правом краю кнопки, подальше от текста.

В настоящее время я использую значок из библиотеки векторных значков следующим образом:

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

Таким образом, изображение масштабируется и каким-то образом размещается справа, но оно больше не выровнено по горизонтали (и я не могу понять почему).

Кто-нибудь знает лучший способ добиться нужного мне стиля?

1. flex:1 Поможет <Text style={{flex:1,....}}... добавить в style и удалить отступы…

2. @Ponleu Я модифицировал код с помощью flex (посмотрите на мою правку), и это, безусловно, выглядит лучше, но моя стрелка все еще не выровнена по вертикали.

3. Измените вид на ` <View style={{ flexDirection: ‘row’, justifyContent : ‘center’}}>

Ответ №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>

Ответ №2:

Смотрите приведенный Ниже простой пример добавления изображения в компонент touchableopacity в react native. Это очень просто, вам нужно обернуть компонент изображения внутри компонента touchableopacity.

 <TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }> 
 <Image source={require('./images/sample_image_button.png')} style = {styles.ImagesStyle} />          
</TouchableOpacity>