ナビゲーションバーの左ボタンからクリックすると、メニューがオフスクリーンで表示されます

Question

右から左にではなく左から右にメニューをレンダリングする方法はありますか？ ナビゲーションバーの右ボタンからクリックされても問題ありません。左ボタンの代わりに を押すと、画面外にレンダリングされます。

Answer 1

ここでは、反応ナビゲーションでポップアップメニューを使用する簡単な例を示します。メニューは、headerRightとheaderLeftプレースホルダの両方にレンダリングされます。それは両側で正しく表示されます。

import React from 'react'; 
import { AppRegistry, Text } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import Menu, { 
    MenuContext, 
    MenuOptions, 
    MenuOption, 
    MenuTrigger 
} from 'react-native-popup-menu'; 

const NavigatorMenu = ({ navigation }) => (
    <Menu> 
    <MenuTrigger text='...' /> 
    <MenuOptions> 
     <MenuOption 
     onSelect={() => navigation.navigate('Page2')} 
     text='Navigate Page 2' 
     /> 
     <MenuOption 
     onSelect={() => navigation.navigate('Page3')} 
     text='Navigate Page 3' 
     /> 
    </MenuOptions> 
    </Menu> 
); 

class Home extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: 'Home', 
    headerRight: <NavigatorMenu navigation={navigation} />, 
    headerLeft: <NavigatorMenu navigation={navigation} />, 
    }); 
    render() { 
    return <Text>Home Page</Text>; 
    } 
} 

const Page2 =() => <Text>2nd Page</Text>; 
const Page3 =() => <Text>3rd Page</Text>; 

const TopStackNavigator = StackNavigator({ 
    Home: { screen: Home }, 
    Page2: { screen: Page2 }, 
    Page3: { screen: Page3 }, 
}); 

const App =() => (
    <MenuContext> 
    <TopStackNavigator /> 
    </MenuContext> 
); 

AppRegistry.registerComponent('examples',() => App); 

それはとAndroid上でテストされました：

• 反応し、ネイティブ：0.37.0
• 反応し、ネイティブ・ポップアップ・メニューを：0.7.3
• 反応ナビゲーション：1.0.0-beta

Answer 2

解決済み。テスト中、私は反応ネイティブメニューと反応ネイティブポップアップメニューを混ぜていました。私は両方をインストールしました。そして、Webstormはそれらを混在させている両方のライブラリのために私を輸入してくれました。