Question

我对android＆amp;使用相同的代码iOS版。但是，我发现两个平台之间的外观不同，特别是图像尺寸（如下所示）。

我想问：

如何设置配置以使两个平台保持一致？
如何设置android＆amp; iOS样式表设置在相同的代码上？

谢谢！

 <MenuButton onPress={() => this.toggle()} style={styles.menuButton}>
      <Image source={require('../images/menu.png')} style={styles.menuButtonImage}/>
 </MenuButton>

StyleSheet setting

Android & iOS output

Answer 1

我还注意到图像在另一个平台上呈现的方式不同。如果我没记错的话，设置静态大小就足够了。如果您必须调整每个平台的样式，我会执行以下操作：

# Use a ternary statement in the function that gets your style object:

getImage () {
    const getStyle = () => ({height:(Platform.OS === 'ios' ? 36 : 48)})

    # then call it where you set the propery:

    return <Image source={require('../images/menu.png')} style={getStyle()} />
}

这样，每次重新渲染父级时都会调用它。

事实上，我的所有样式都是这样定义的。它就像动态样式的魅力一样，可能依赖于属性。此外，将组件和函数保留在尽可能自包含元素的组件中是一种很好的模式。

React Native - android和amp;之间不同的图像大小iOS版

1 个答案: