React Native中的条件样式

Question

我在React-Native应用中使用了ImageBackground标签。

const{height,width} = Dimensions.get('window);
const navHeight = ExtraDimensions.get('SOFT_MENU_BAR_HEIGHT');

render(){
 return(
  <ImageBackground source={Images.bg} style={{width=width+48,height=height}}>
     //content
  </ImageBackground>
 );
}

数字48是默认Android导航栏（包含“返回”按钮的导航栏）的高度。navHeight用于检测设备上导航栏的高度（参见此处：https://github.com/Sunhat/react-native-extra-dimensions-android）。

由于现在有些设备没有导航栏，我想在ImageBackground样式中进行条件化样式设置，当存在navHeight值时，采用style={styles.bg1}，不存在navHeight值时采用style={styles.bg2}。请问我应该在哪里以及如何实现样式设置？谢谢。

我当前错误的做法是：

<ImageBackground source={Images.bg} style={navHeight=0 ? styles.bg1 : styles.bg2}>

- nobody99

Answer 1

存在一个语法错误，进行比较时你必须使用==。

尝试使用以下代码：

<ImageBackground source={Images.bg} style={ (navHeight==0) ? styles.bg1 : styles.bg2}>

此外，我建议您使用Image标签，并通过使用position="absolute"将子组件附加到其中。因为某些样式属性（如borderRadius）在ImageBackground标记的情况下无法起作用。

希望这可以帮助您！

- Ron Astle Lobo

---

谢谢。它有效。但是我在将const声明为数字时犯了一个愚蠢的错误。应该是var navHeight。 - nobody99