透明NavigatorIOS无法正常工作

Question

我想显示一个100％透明的导航栏，但我有一些像浅粉色而不是背景色的东西：

这是我的代码：

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

非常感谢你的帮助，

玛戈特

Answer 1

React Native团队不支持NavigatorIOS组件，它只是react-native中提供的Apple iOS导航栏，您只能访问xcode中可用的相同选项。在构建没有react-native的本机iOS应用程序时，您无法处理xco​​de中栏的完全透明度。所以你不能用反应本地做到这一点，不幸的是。

您可以使用react-native-bar库来获得更加可自定义的导航栏。您可以使用react-native-navbar执行此操作：
<NavigationBar tintColor="transparent" />

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

Answer 2

这是因为主视图的背景颜色吗？如果是这种情况，那么在容器视图中添加marginTop值为64会有所帮助。

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