React Native 中的条件样式答案

【问题标题】：Conditional Styling in React NativeReact Native 中的条件样式
【发布时间】：2018-10-19 05:12:43
【问题描述】：

我的 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 导航栏的高度（包含 BACK 按钮）。 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}>

【问题讨论】：

标签： javascript android react-native

【解决方案1】：

有一个语法错误，为了比较你必须使用==。

试试这个，

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

此外，我建议您使用Image 标签并使用position="absolute" 将子组件附加到它。因为像borderRadius 这样的一些造型道具在ImageBackground 标签的情况下不起作用。

希望对你有帮助！

【讨论】：

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