Question

我一直在尝试使用一些反应本机代码，发现我的视图在Android和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

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

Answer 1

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

React Native：View不绑定到右侧

1 个答案: