web-dev-qa-db-ja.com

Reactヘッダー/アクションバー付きのネイティブcreateDrawerNavigator

ナビゲーションドロワーを実装しましたが、ヘッダー/アクションバーを表示できません

const RootStack = createDrawerNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    intialRouteName: 'Home',
    navigationOptions: {
      headerStyle : {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle : {
        color: 'white',
      },
    },
  }
);


export default class App extends React.Component {
  render() {
    return <RootStack/>;
  }
}

ドロワーナビゲーションとヘッダーバーを使用する方法はありますか?

enter image description here

3
hb22

RootStack(Drawer)はStackNavigator内にある必要があります。

const RootStack = createDrawerNavigator(
{
  Home: HomeScreen,
  Details: DetailsScreen,
},
{
intialRouteName: 'Home',
navigationOptions: {
  headerStyle : {
    backgroundColor: '#f4511e',
  },
  headerTintColor: '#fff',
  headerTitleStyle : {
    color: 'white',
    },
   },
 }
);

const AppStack = StackNavigator({ RootStack : { screen: RootStack } });

export default class App extends React.Component {
  render() {
    return <AppStack/>;
  }
}

詳細 ここ

2
Daniel Mesa