Question

我无法移除“PRACTICIA”徽标图像周围的空白区域，因此我的按钮被向下推到底部。有人可以帮我这个吗？我的代码是here

我的截图位于底部。以下是整个应用程序的代码，它位于app.js文件中。

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StackNavigator } from 'react-navigation';
import {
  Button,
  FormLabel,
  FormInput,
  FormValidationMessage,
  Divider } from 'react-native-elements';

import { CardSection } from './src/components/CardSection';


class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'PRACTICIA'
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
<View style={{ backgroundColor: 'white', flex: 1 }}>
<Image
style={{ flex: 1, height: 100, width: undefined }}
resizeMode="contain" source={require('./images/practicialogo.png')}
/>
<Text style={styles.textStyle}>Sign up as a...</Text>
<Divider style={{ height: 10, backgroundColor: 'white' }} />
        <Button
        raised
        backgroundColor="#3399ff"
        borderRadius={20}
          onPress={() => navigate('Teacher')}
          title="TEACHER"
        />
        <Divider style={{ height: 10, backgroundColor: 'white' }} />

        <Button
        raised
        backgroundColor="green"
        borderRadius={20}
          onPress={() => navigate('Parent')}
          title="PARENT"
        />
        <Divider style={{ height: 10, backgroundColor: 'white' }} />

        <Button
        raised
        backgroundColor="brown"
        borderRadius={20}
          onPress={() => navigate('Student')}
          title="ADULT STUDENT (18+)"
        />
        <Text style={styles.text2Style}>Already Registered?</Text>
        <Button
        raised
        flex='2'
        backgroundColor="grey"
        borderRadius={20}
          onPress={() => navigate('Login')}
          title="Login"
        />
      </View>
    );
  }
}

class TeacherSignUp extends React.Component {
  static navigationOptions = {
    title: 'TEACHER SIGN UP',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
      <Divider style={{ height: 20, backgroundColor: 'white' }} />
        <Text style={styles.textStyle}>Sign Up</Text>
        <FormLabel>Email</FormLabel>
        <FormInput />
        <FormLabel>Password</FormLabel>
        <FormInput />
        <FormLabel>First Name</FormLabel>
        <FormInput />
        <FormLabel>LastNme</FormLabel>
        <FormInput />
        <Divider style={{ height: 10, backgroundColor: 'white' }} />
        <Button
        raised
        backgroundColor="brown"
        borderRadius={0}
          // onPress={() => navigate()}
          title="SUBMIT"
        />
      </View>
    );
  }
}
class ParentSignUp extends React.Component {
  static navigationOptions = {
    title: 'PARENT SIGN UP',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
        <Text>Sign Up</Text>
      </View>
    );
  }
}
class StudentSignUp extends React.Component {
  static navigationOptions = {
    title: 'ADULT STUDENT SIGN UP',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
        <Text>Sign Up</Text>
      </View>
    );
  }
}

class Login extends React.Component {
  static navigationOptions = {
    title: 'LOGIN',
  };
  render() {
    return (
      <View style={{ backgroundColor: 'white', flex: 1 }}>
      <FormLabel>Email/Username</FormLabel>
      <FormInput />
      <FormLabel>Password</FormLabel>
      <FormInput />
      <Divider style={{ height: 10, backgroundColor: 'white' }} />
      <Button
      raised
      backgroundColor="grey"
      borderRadius={0}
        // onPress={() => navigate()}
        title="SUBMIT"
      />
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Teacher: { screen: TeacherSignUp },
  Parent: { screen: ParentSignUp },
  Student: { screen: StudentSignUp },
  Login: { screen: Login },

});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  textStyle: {
    alignSelf: 'center',
    color: '#617189',
    fontSize: 20,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
},
text2Style: {
  alignSelf: 'center',
  color: '#617189',
  fontSize: 14,
  fontWeight: '300',
  paddingTop: 10,
  paddingBottom: 10
},
titleText: {
  fontSize: 20,
  fontWeight: 'bold',
},
});

这是屏幕截图，徽标周围不应该有那么多空白区域：

White space above and below image

这是图片，没有那么多的空白区域，所以我不明白白色空间的来源：

Answer 1

全部谢谢，

我相信答案在于flex属性。给图像一个flex的支柱：1将占用整个容器。所以我玩了它给它一个相对值并从“1/2”开始（根据EsLint，需要分数中的那些空格）。这马上解决了这个问题！然后我开始玩这个分数越来越大（3 / 4,4 / 5,7 / 8等）直到我到达我想要的地方。这似乎解决了这个问题。结果如下。不确定它是唯一的解决方案，甚至是最好的解决方案，但似乎有效。很高兴收到反馈和评论。

修改后的代码行： style = {{flex：7/8，height：undefined，width：undefined}}

Answer 2

减小图像中的高度值。将其从100更改为70或60（根据您的感觉进行调整），它应该消除图像顶部和底部的空白。

React Native：图像周围的空白区域

2 个答案: