Question

我是React Native开发的新手。在我的应用程序中，我有登录屏幕。在laogin屏幕中，我有两个文本输入以及图像。我已经在一个视图中拍摄了图像和文本输入，并将弹性方向指定为行。我给文本输入作为alignSelf拉伸。因此，这里的问题是我需要输入完整的文本以及图像。但是，如果我删除了flex方向，则将获得整个屏幕的长度。以下是代码

import React, {Component} from 'react';
import {StyleSheet, Text, View,TextInput,TouchableOpacity,StatusBar,Image} from 'react-native';

export default class App extends Component {
  static navigationOptions = {
    title: "Welcome",
    header: null,
  }
  render() {
    // const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
        <StatusBar
           barStyle="light-content"
           backgroundColor="#2f5597"
        />
        <Image source={require('../../app/images/ic_accountlist.png')} style={styles.logo}/>

        <View style={styles.loginView}>
          <View >
             <Image source={require('../../app/images/ic_userid.png')}  />
             <TextInput placeholder="Acct No/User Id" style={styles.textInput} underlineColorAndroid={'rgb(0,0,0)'}></TextInput>
          </View>
          <View style={styles.user}>
            <Image source={require('../../app/images/ic_password.png')}  />
            <TextInput placeholder="Password" style={styles.textInput} underlineColorAndroid={'rgb(0,0,0)'}></TextInput>
          </View>
        </View>
        <TouchableOpacity style={styles.btnLogin} onPress={this.login}><Text style={{color: 'white'}}>Log In</Text></TouchableOpacity>

      </View>
    );
  }

  login=()=>{
    // alert("testing......");
    this.props.navigation.navigate('Profile');
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCF0',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color:'#FF0000',
  },
  textInput: {
    alignSelf: 'stretch',
    padding: 10,
    marginLeft: 5,
    marginRight:0,
  },
  btnLogin:{
    borderRadius: 10,
    backgroundColor: '#2f5597',
    padding: 10,
    marginTop: 20,
    paddingLeft: 50,
    paddingRight: 50,
    alignSelf: 'center',
  },
  user:{
    flexDirection: 'row',
  },
  logo :{
    marginTop: 100,
    alignSelf: 'center',
  },
  loginView:{
    marginTop: 60,
  }
});

以下是我得到的输出

在这里，我需要完整的文本输入以及图像。像下面的

Answer 1

不需要使用alignSelf属性。相反，您必须使用flex: 1：

textInput: {
  flex: 1,
  padding: 10,
  marginLeft: 5,
  marginRight: 0,   
},

flex: 1是一种简写形式，因此您也可以显式使用flexGrow: 1来达到相同的效果：

textInput: {
  flexGrow: 1,
  padding: 10,
  marginLeft: 5,
  marginRight: 0,   
},

您可以在MDN上了解有关flex的更多信息。

结果（忽略其他图标）：

Answer 2

您需要将flex: 1添加到textInput样式

textInput: {
  alignSelf: 'stretch',
  padding: 10,
  marginLeft: 5,
  marginRight:0,
  flex: 1
}

TextInput在行方向上的完整视图

2 个答案: