文本未在单行 React Native 中显示答案

【问题标题】：Text not showing in single line React Native文本未在单行 React Native 中显示
【发布时间】：2020-03-14 11:24:40
【问题描述】：

我想在按钮的右侧显示文本，但文本没有显示在一行中，因为它在一行中显示为“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>

问题是“创建帐户”这个文本没有显示在单行中。

【问题讨论】：

这里使用 ImageBackground 有什么特别的原因吗？为什么不使用 Image 代替？

标签： react-native react-native-android react-native-stylesheet

【解决方案1】：

见下面的例子。我想这会帮助你理解。但是，如果您想使用 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;

请不要怀疑。

【讨论】：