透明 NavigatorIOS 不起作用

Question

我想显示一个 100% 透明的导航栏，但我有类似浅粉色的东西而不是背景颜色:

这是我的代码：

<NavigatorIOS
ref='nav'
tintColor="white"
style={{flex: 1}}
initialRoute={{
  title: 'Splash',
  navigationBarHidden: true,
  component: SplashScene
}}/>

非常感谢您的帮助，

玛格特

Answer 1

这是因为你的主视图的背景色吗？如果是这种情况，那么将 64 的 marginTop 添加到您的容器视图应该会有所帮助。

import { Modal, Text, TextInput, TouchableHighlight, View, ListView, NavigatorIOS } from 'react-native';
import React, { Component, PropTypes } from 'react';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    );
  }
}

class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    navigator: PropTypes.object.isRequired,
  }

  _onForward = () => {
    this.props.navigator.push({
      title: 'Scene ' + nextIndex,
    });
  }

  render() {
    return (
      <View style={{backgroundColor: 'red', flex: 1, marginTop: 64}}>
        <Text>Current Scene: { this.props.title }</Text>
        <TouchableHighlight onPress={this._onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

Answer 2

NavigatorIOS 组件不受 React Native 团队支持，它只是 React-native 中可用的 Apple iOS 导航栏，您只能访问 xcode 中可用的相同选项.在没有 react-native 的情况下构建本机 iOS 应用程序时，您无法处理 xcode 中栏的完全透明。所以你不能遗憾地用 react-native 来做。

您可以使用 react-native-bar 库来获得更可自定义的导航栏。你将能够通过 react-native-navbar 这样做：
<NavigationBar tintColor="transparent" />

如果您需要更多帮助，您也可以see this link
最终结果将类似于 this image

透明 NavigatorIOS 不起作用

Transparent NavigatorIOS doesn't work

javascript

ios

react-native

navigator

navigator-ios