React Native Router Flux BackgroundImage答案

【问题标题】：React Native Router Flux BackgroundImageReact Native Router Flux BackgroundImage
【发布时间】：2018-10-24 10:45:06
【问题描述】：

是否可以将图片移到顶部栏后面。我提供了一个 Screenshot 。谢谢各位！

编辑 1：一旦您看到标签栏 + 一个场景示例。这是在路由器组件中。下一个代码片段取自这些场景中呈现的组件中的一个。

   class Courses extends React.Component{ render(){
return(
      <Image
        source={require('../../../assets/backgrounds/Navigation/kurse.jpg')}
        style={{resizeMode: 'stretch', height: 100, width: 430}}
      />



<Scene
         key="tabbar"
         tabs
         tabBarStyle={{backgroundColor: '#252525'}}
         activeBackgroundColor="#CEECF5"
         inactiveBackgroundColor="white"
         >


             <Scene key="Start" icon={HomeIcon} >
               <Scene
                key="Dashboard"
                component={Dashboard}
                titleStyle={styles.nagivationBarTitleStyle}
                title="Start"
                rightButtonImage={SettingIcon}
                onRight={()=>{Actions.Settings()}}
                navigationBarStyle={{ backgroundColor: 'transparent'}}
                 />

【问题讨论】：

请将编写的代码分享给其他开发者。
@Sateesh 确实添加了代码

标签： react-native react-native-router-flux

【解决方案1】：

您必须创建自己的导航栏组件并为其赋予 backgroundColor:"transparent" 并从路由器通量堆栈中隐藏导航栏，这样您将在下面的导航栏检查示例后面看到图像内容。

render(){
return(
 <ImageBackground
        resizeMode="cover"
        source={Images.loginBg}
        style={styles.container}
      >

         <Navbar title="Login" rightTitle="Signup" onRight={this.onRight}/>

        <View style={styles.dividerFirst}>
          <Image source={Images.title} style={styles.titleImage} />
        </View>
        <View style={styles.dividerSecond}>
          <FacebookButton
            onPress={this.onFacebook}
            title="Login With Facebook"
          />
          <View style={styles.spacer} />
          <GradientButton onPress={this.onDeviceMode} title="Practice Mode" />
        </View>
      </ImageBackground>
);
}

【讨论】：