造型反應原生組件 - 當以像素定義時，一切都太大

我正在構建一個反應本機應用程序（直到現在還沒有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

來源

2017-01-10 Tom

是否有可能共享使用最少的代碼複製這個代碼庫？ – Andreyco

@Andreyco肯定我已經啓動了項目，因爲它只有一個重要的組件：https://github.com/tomchambers2/graublaumiau – Tom

背景圖像我會用那麼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的，填充，利潤率，因爲應用程序將有不同顯示上真正的設備與他們的決議。

來源

2017-01-11 10:55:46

謝謝，這爲後臺工作。我仍然不知道爲什麼邊距和圖像尺寸如此不合適。通過使用flexbox，填充，邊距，你是什麼意思 - 我已經在使用這些例子了？ – Tom

我在gist中做了一個例子：https://gist.github.com/wojteg1337/17416cb7dc42dec7c239d527ffa8c0a6 值反應本地，不會是1：1，因爲反應本地是縮小虛擬像素到設備尺寸。你需要找到一些規模，看起來會像desing一樣:) –

基本上這個答案是，我不明白邏輯像素和設備像素之間的差異。我的圖像大小假定爲2048，這使得它們的大小是它們應該達到的兩倍。

看過像iosres這樣的各種指南後，它開始有意義了，我製作了正常的設備像素大小的圖像和@ 2張圖像。

來源

2017-01-16 12:02:07 Tom

造型反應原生組件 - 當以像素定義時，一切都太大

回答

相關問題