React Native：ビューが右に繋がれていません

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 

編集：は、問題がでなければならないことはほとんど触知です反応しないネイティブは、ビュー境界がどこにあるかを決めることができません。したがって、ビュー内をラップする代わりに、ビューの範囲を決定します。私はまた、アンドロイドのためのuiautomationviewerのようなUIの問題をデバッグするのに役立つツールについて知りたいと思っています。

Answer 1

背景画像にwidthとresizeModeを指定しないため、画面がオーバーフローします。デフォルトではalignItemsはstretch、TouchableOpacityはコンテナを水平に塗りつぶし、画面もオーバーフローします。