React Native：视图不绑定到右边答案

【问题标题】：React Native : View does not bound to the rightReact Native：视图不绑定到右边
【发布时间】：2017-01-17 08:46:07
【问题描述】：

我一直在尝试一些 react native 代码，发现我的视图在 android 和 iOS 渲染中都没有正确的边界。因此，当我添加水平边距时，视图仅在左侧显示边距，如下所示。

我还附上了我的代码和样式，以指导我在哪里出错。

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

编辑： 问题应该是 react-native 无法确定视图边界的位置，这几乎是显而易见的。因此，它决定扩展它，而不是包裹在视图中。我也很想了解任何可以帮助我调试 UI 问题的工具，例如 uiautomationviewer for android。

【问题讨论】：

标签： javascript react-native

【解决方案1】：

您没有在背景图像中指定width 或resizeMode，因此它会溢出屏幕。默认情况下alignItems 是stretch，TouchableOpacity 水平填充容器并溢出屏幕。

【讨论】：