如何在 RNRF 中使自定义导航栏透明

Question

我已经尝试了 react-native-router-flux 中的所有选项，例如：navigationBarStyle 或 navTransparent 以及 navigationBarStyle={[STYLES.navBar]} 在尝试使自定义导航栏透明时所有这些都不起作用有没有办法使用反应导航使其透明我应该从反应本机路由器通量更改为反应导航来做到这一点我已经发布了它作为 Git Hub 中的一个问题这是 link :Github issue #2132

因为我发现很难使用 react-navigation 我已经切换到 RNRF 除了从 RNRF 切换到 RN 之外是否有任何解决方案可以使自定义导航栏透明，或者它是 RN 中的错误

这是我在 NavBar.js 文件中使用的代码：

import {
 View, Image, StatusBar, TouchableWithoutFeedback
} from 'react-native';
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux';

class NavBar extends Component {
  render() {
    return (
      <View style={styles.backgroundStyle}>
      <StatusBar />
      <View style={{ flexDirection: 'row' }}>
      <TouchableWithoutFeedback onPress={() => Actions.pop()}>
      <Image
    source={require('./Images/back-arrow.png')}
    style={styles.backarrowStyle} />
      </TouchableWithoutFeedback>

      <Image
  source={require('./Images/help.png')}
  style={styles.helpStyle} />


  <Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
    </View>
</View>
    );
  }

}
const styles = {
  backgroundStyle: {
 backgroundColor: 'transparent',
  },
  backarrowStyle: {
    resizeMode: 'contain',
    flexDirection: 'row',
    width: 55,
    height: 55,
    left: 0,
    justifyContent: 'flex-start'
  },
  helpStyle: {
    resizeMode: 'contain',
      width: 50,
      height: 50,
      left: 210,
      justifyContent: 'flex-end',
      position: 'relative'

  },
  settingStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
    justifyContent: 'flex-end',
  position: 'relative',
  left: 210
}
};


export default NavBar;

这是我的 Router.js 文件：

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import MainScreen from './components/MainScreen';
import ChallengeScreen from './components/ChallengeScreen';
import NavBar from './components/NavBar';
import Toss from './components/Toss';

const RouterComponent = () => {
  return (
    <Router>
<Scene key="root">
    <Scene key="homeScreen" component={MainScreen} hideNavBar={1} />
    <Scene
     key="screen2" component={ChallengeScreen}
     navBar={NavBar}
        />
    <Scene
     key="screen3" component={Toss}
   navBar={NavBar}
        />
</Scene>
    </Router>
  );
};
export default RouterComponent;

Answer 1

您可以通过在 navigationBarStyle 中设置导航栏不透明度来设置半透明导航栏

<Scene key="scene2" component={ChallengeScreen} 
       navigationBarStyle={{opacity:0.3}}/>

但问题是包括左右按钮在内的整个导航栏将继承不透明度。我建议只设置 hidenavbar={true} 并在场景组件中实现自定义导航栏。例如：在 Scene2 组件 (ChallengeScreen)

 render() {
     const customNavbar = {
       <View style={{position:'absolute', top:0, flexDirection:'row', justifyContent:'space-between', backgroundColor:'transparent', padding:10}}>
           <TouchableOpacity>
            <Text>Left Button</Text>
           </TouchableOpacity>
           <Text>Title</Text>
           <TouchableOpacity>
              <Text>Right Button</Text>
           </TouchableOpacity>
       </View>
    }

   return () {
     <View style={{flex:1}}>
         {customNavbar}
         <View></View>
     </View>
   }
 }

如何在 RNRF 中使自定义导航栏透明

How can I make the custom navigation bar transparent in RNRF

javascript

reactjs

react-native

react-native-router-flux

react-navigation