javascript - 透明 NavigatorIOS 不起作用

Question

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

这是我的代码：

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

非常感谢你的帮助，

玛戈特

Answer 1

NavigatorIOS 组件不受 React Native 团队的支持，它只是 react-native 中可用的 Apple iOS 导航栏，您只能访问 xcode 中可用的相同选项。在构建没有 react-native 的原生 iOS 应用程序时，您无法在 xcode 中处理栏的完全透明度。因此，遗憾的是，您也不能使用 react-native 来做到这一点。

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

如果您需要更多帮助，您也可以查看此链接
最终结果将类似于此图像

Answer 2

这是因为您的主视图的背景颜色吗？如果是这种情况，那么在容器视图中添加 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>
    )
  }
}