React Native: View не связан справа

Question

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

Я также прилагаю мой код и стили, чтобы вести меня, где я бы не так.

Login.js

import React,{Component} from 'react'; 
import {View,ToolbarAndroid,Text, Image, StatusBar,TextInput, TouchableOpacity} from 'react-native'; 
import styles from './styles.js' 

class LogIn extends Component { 

    constructor(props) { 
    super(props) 
    this.state = {hostName: '', userName: '', password: ''} 
    } 

    onButtonPress() { 
    this.props.onSubmit && this.props.onSubmit(this.state); 
    } 

    render() { 
    return(
     <Image style={styles.container} source={images.background}> 
     <StatusBar backgroundColor="#00EF6C00" translucent={true}/> 
     <View style={styles.logocontainer}> 
      <FitImage source={images.logo} resizeMode="contain" resizeMethod="scale" style= {{width: 300,position: 'absolute', left: 50, height: 100}}/> 
     </View> 
     <View style={styles.comp_container}> 
      <TextInput placeholder="Host Name" style={{height: 40}} onChangeText={(text) => this.setState({hostName: text})}/> 
      <TextInput placeholder="User Name" style={{height: 40}} onChangeText={(text) => this.setState({userName: text})}/> 
      <TextInput placeholder="Password" style={{height: 40}} onChangeText={(text) => this.setState({password: text})}/> 
      <TouchableOpacity onPress={this.onButtonPress.bind(this)} style={{height: 40, flex: 1, flexDirection: 'row'}}> 
      <Text style={{flex: 1}}> Submit </Text> 
      </TouchableOpacity> 
     </View> 
     </Image> 
    ) 
    } 

} 

LogIn.propTypes = { 
    onSubmit: React.PropTypes.func, 
} 
export default LogIn; 

Также Вы можете найти в прикрепленном таблицу стилей для получения дополнительной информации о стиле

import { StyleSheet } from 'react-native' 
const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column' 
    }, 
    toolbar: { 
    backgroundColor: '#EF6C00', 
    height: 56, 
    elevation: 3, 
    }, 
    textInput: { 
    borderRadius: 20, 
    borderColor: "#FFFFFF", 
    height: 40, 
    }, 
    button: { 
    height: 40, 
    }, 
    logocontainer: { 
    flex: 1, 
    flexDirection: 'column', 
    alignItems: 'stretch', 
    justifyContent: 'center', 
    }, 
    comp_container: { 
    flex: 2, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    marginHorizontal: 16, 
    } 
}); 

export default styles 

Edit: Это почти ощутима, что эта проблема должна быть с response-native не может решить, где находится граница вида. Поэтому вместо того, чтобы обертывать внутри представления, он решает его расширить. Я также хотел бы узнать о любых инструментах, которые могут помочь мне отладить проблемы пользовательского интерфейса, например, uiautomationviewer для Android.

Answer 1

Вы не указываете width или resizeMode в фоновом изображении, чтобы он переполнял экран. По умолчанию alignItems is stretch, TouchableOpacity заполняет контейнер горизонтальным и также переполняет экран.