Текст не отображается в одну строку React Native

Я хочу показать текст только справа от моей кнопки, но текст не отображается в одной строке, так как он отображается как «Cre» в одной строке, а другой текст в другой строке. Проблема заключается в ширине и высоте моего значка, которые меньше, поэтому он создает дочерний элемент с одинаковой шириной и высотой, но я не могу увеличить свою ширину и высоту. Это моя кнопка, внутри которой ImageBackGround является дочерним элементом:

<TouchableHighlight style={styles.back} onPress={() => this.backBtn()}>
     <ImageBackground source={require('../assets/back.png')}
      style={{ width: 40, height: 45,position: 'absolute',  justifyContent: 'flex-start'}}
                resizeMode="contain">
     <View style={{position: 'absolute',right: -50,alignSelf:'center'}}> 
       <Text style = {{color:"#1589FF", fontSize:22}} >Create an Account </Text> 
            </View>
     </ImageBackground>
</TouchableHighlight>

Проблема в том, что этот текст «Создать учетную запись» не отображается в одной строке.


react-native react-native-android react-native-stylesheet
person Talha Nadeem    schedule 14.03.2020    source источник
comment
Есть ли какая-то конкретная причина использовать здесь ImageBackground? Почему бы не использовать изображение вместо этого?   -  person aytek    schedule 14.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

См. пример ниже. Я думаю, это поможет вам понять. однако, если вы хотите использовать ImageBackground вместо Image, дайте мне знать.

import * as React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.viewStyle}>
        <TouchableOpacity
          style={styles.inputContainer}
          onPress={() => console.log('click')}>
          <Image
            style={{ width: 30, height: 30 }}
            source={{
              uri:
                'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-512.png',
            }}
          />
          <Text style={styles.textStyle}>Create an Account</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewStyle: {
    flex: 1,
    width: '80%',
    alignSelf: 'center',
    justifyContent: 'center',
  },
  inputContainer: {
    padding: 10,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    backgroundColor: 'gray',
  },
  textStyle: {
    fontSize: 16,
    color: '#000000',
  },
});

export default App;

Не стесняйтесь сомнений.

person SRanuluge    schedule 14.03.2020