Question

是否可以将图片移到顶部的条后面。我提供了 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'}}
                 />

Answer 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>
);
}

反应本机路由器流量BackgroundImage

1 个答案: