Question

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

问题在于此文本“创建帐户”未单行显示。

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

有任何疑问。

文本未在单行React Native中显示

1 个答案: