Текст не отображается в одной строке React Native - PullRequest
Новая
       26

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

0 голосов
/ 14 марта 2020

Я хочу, чтобы текст отображался справа от кнопки, но текст не отображался в одной строке, так как он отображался как «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>

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

1 Ответ

0 голосов
/ 14 марта 2020

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

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;

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

...