ios - 样式 react native 组件 - 当以像素定义时，一切都太大了

Question

我正在构建一个 React native 应用程序(直到现在没有 iOS 开发经验)并且我正在努力正确布局。屏幕应如下所示:

但它看起来像这样:

我已将边距设置为我想要的像素大小，但它们似乎太大了。我是否误解了 React Native 布局的方式？

该组件的代码:

import React, { Component, PropTypes } from 'react';
import {
  Text,
  View,
  Button,
  Image,
  TouchableHighlight,
  StyleSheet
} from 'react-native'

import Background from '../assets/background.png'
import SoundOn from '../assets/main_icon_sound.png'
import SoundOff from '../assets/main_icon_soundoff.png'
import imprintButton from '../assets/main_icon_imprint.png'
import storyButton from '../assets/main_icon_story.png'
import gameButton from '../assets/main_icon_game.png'

import Game from './Game'
import Imprint from './Imprint'
import Story from './Story'
import Sound from './Sound'

const styles = StyleSheet.create({
  background: {
    height: 700, width: 700
  },
  soundButton: {
    marginLeft: 60, marginTop: 40
  },
  imprintButton: {
    marginLeft: 60, marginTop: 40
  },
  storyButton: {
    marginLeft: 382, marginBottom: 89
  },
  gameButton: {
    marginRight: 382, marginBottom: 89
  }
})

class MainMenu extends Component {
  static propTypes = {
    navigator: PropTypes.object.isRequired,
  }

  render() {
    return (
      <View>
        <Image source={Background} resizeMode={Image.resizeMode.contain} style={styles.background}>
          <View style={{backgroundColor: 'rgba(0,0,0,0)'}}>
            <TouchableHighlight style={styles.soundButton}>
              <Image source={SoundOn} resizeMode={Image.resizeMode.contain}></Image>
            </TouchableHighlight>

            <TouchableHighlight style={styles.imprintButton}>
              <Image source={imprintButton}></Image>
            </TouchableHighlight>

            <TouchableHighlight style={styles.storyButton}>
              <Image source={storyButton}></Image>
            </TouchableHighlight>

            <TouchableHighlight style={styles.gameButton}>
              <Image source={gameButton}></Image>
            </TouchableHighlight>
          </View>
        </Image>
      </View>
    )
  }
}

export default MainMenu

Answer 1

对于背景图片，我会使用 flexbox 和样式，

const styles = StyleSheet.create({
    bgImageWrapper: {
        position: 'absolute',
        top: 0, bottom: 0, left: 0, right: 0
    },
    bgImage: {
        flex: 1,
        resizeMode: "stretch"
    },
});

<View style={styles.bgImageWrapper}>
    <Image source={require('image!background')} style={styles.bgImage} />
  </View>
  <Text> // yours code
    Welcome to React Native!
  </Text>
</View>

对于按钮，您还可以使用 flexbox、填充、边距，因为应用在真实设备上的分辨率会有所不同。