0

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

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

4

1 回答 1

0

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

随意怀疑。

于 2020-03-14T12:50:23.450 回答