javascript - 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 导航栏(包含 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}>

Answer 1

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

试试这个，

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

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

希望对你有帮助!