Question

我正在建立一个反应本机应用程序（直到现在还没有iOS开发经验），我正在努力正确布局。屏幕应如下所示：

但它看起来像这样：

我已将边距设置为我之后的像素大小，但它们似乎太大了。我是否误解了原生布局的反应方式？

此组件的代码：

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，paddings，margin，因为app在真实设备上的分辨率会有所不同。

Answer 2

基本上答案是我没有理解逻辑像素和设备像素之间的区别。我的图像大小假设分辨率为2048，这使它们的大小应该是它们应该的两倍。

在查看了iosres之类的各种指南后，它开始变得有意义了，我制作了正常的设备像素大小的图像和来自我的原件的@ 2x图像。

样式反应原生组件 - 当以像素定义时，一切都太大了

2 个答案: