web-dev-qa-db-ja.com

非表示にする方法React Native NavigationBar

NavigatorにNavigatorIOSがあり、NavigatorIOSのバーを使用するためにNavigatorのNavigationBarを非表示にしたいのですが。これを行う方法はありますか？

これは screenshot でした。 NavigatorIOSのバックエンドが必要です。

構築したい構造は次のとおりです。

├── NavigatorRoute1
│   ├── NavigatorIOSRoute1
│   ├── NavigatorIOSRoute2
│   └── NavigatorIOSRoute3
└── NavigatorRoute2

私が持っているコードは以下です。 （基本的にUIExploreの例から取得。

ナビゲーター

render: function(){
return (
  <Navigator
    initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
    initialRouteStack={ROUTE_STACK}
    style={styles.container}
    renderScene={this.renderScene}
    navigationBar={
      <Navigator.NavigationBar
        routeMapper={NavigationBarRouteMapper}
        style={styles.navBar}
      />
    }
  />
);
}

NavigatorIOS

render: function(){
var nav = this.props.navigator;
 return (
  <NavigatorIOS
    style={styles.container}
    ref="nav"
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {nav: nav},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
);

}

私のソリューションで更新する

Navigatorのレンダリングを処理する状態を変更する関数を追加し、状態を変更するためにコンポーネントに小道具を渡します。

hideNavBar: function(){
  this.setState({hideNavBar: true});
},
render: function(){
 if ( this.state.hideNavBar === true ) {
  return (
    <Navigator
      initialRoute={ROUTE_STACK[0]}
      initialRouteStack={ROUTE_STACK}
      renderScene={this.renderScene}
    />
  );
 }else{
  return (
    <Navigator
      initialRoute={ROUTE_STACK[this.getInitialRouteIndex()]}
      initialRouteStack={ROUTE_STACK}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <Navigator.NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

}

そして

render: function(){
 var hideNavBar = this.props.hideNavBar;
 return (
  <NavigatorIOS
    style={styles.container}
    initialRoute={{
      component: UserSetting,
      rightButtonTitle: 'Done',
      title: 'My View Title',
      passProps: {hideNavBar: hideNavBar},
    }}
    tintColor="#FFFFFF"
    barTintColor="#183E63"
    titleTextColor="#FFFFFF"
  />
 );

}

javascriptreact-nativenavigationbar
15
shohey1226

Navigatorクラスでは、ナビゲーションバーを渡しているように見えます。そこにロジックを追加して、使用するものに応じてNavigator.NavigationBarまたはNavigatorIOSバーのいずれかに渡すことができます。これを行うには、バーを変更するときに更新する状態変数をナビゲータで指定する必要があります。

2
Linai

現在のルートを検査できるカスタムNavigationBarを定義することでこれを解決しました。次のようになります。

class NavigationBar extends Navigator.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];

      if (route.display === false) {
        return null;
      }
    }

    return super.render();
  }
}

あなたの例を使用して：

render: function(){
  return (
    <Navigator
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        display: false,
      }}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}
21
Jeff Trudeau

いくつかの古いメソッドは非推奨であるため、stacknavigatorを使用しました。 StackNavigatorを使用している場合、それは私のために動作します。

static navigationOptions = { title: 'Welcome', header: null };

問題があれば、お気軽にお問い合わせください。

16
Naeem Ibrahim

これは私がしました：

Dashboard:{
  screen: Dashboard,
  navigationOptions: {
    headerStyle: {display:"none"},
    headerLeft: null
  },
},
7
Роман Карабанов

NavigatorIOSを常に使用する場合、次のように実行できます。

  1. ファイルNavigatorIOS.ios.jsを次のように変更します。

    before: navigationBarHidden={this.props.navigationBarHidden}
after:  navigationBarHidden={route.navigationBarHidden}

  2. navigator.Push（{navigationBarHidden：false}）

5
H87kg_X
static navigationOptions = { title: 'Welcome', header: null };
3
Shubham Goel

次のように、navigationOptionsで、react-navigationにnull：ヘッダーを使用します。

navigationOptions: {
    header: null,
}
2
Isaac Sekamatte

trueに設定して、navigator.PushまたはinitialRouteとともにこのプロパティを渡します

navigationBarHidden ?: PropTypes.bool

ナビゲーションバーがデフォルトで非表示かどうかを示すブール値。

例えば：

<NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'LOGIN',
            component: Main,
            navigationBarHidden: true,
          }}/>

または

this.props.navigator.replace({
        title: 'ProviderList',
        component: ProviderList,
        passProps: {text: "hai"},``
        navigationBarHidden: true,
  });
2
Tibin Thomas