Question

我正在使用React-Native-Paper's Menu Component

我试图在点击图标后从标题显示菜单项。

到目前为止，我仅设法在屏幕上显示项目列表。

但是，我要显示标题中的菜单列表。

由于React Navigation从版本：4.x更新到版本：5.x，我对如何解决这个问题感到有些困惑。我在这里尝试遵循example，但仍然需要一些时间来完全了解钩子及其工作方式。

不胜感激。

可行/可测试的代码链接，代码段和屏幕截图，如下所示：

Register.js：

import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    }
  }

  //[ TEST DROP DOWN MENU ]
  _openMenu = () => this.setState({ visible: true });

  _closeMenu = () => this.setState({ visible: false });

  renderMenuExample() {
    return (
      <View
        style={{
          paddingTop: 50,
          flexDirection: 'row',
          justifyContent: 'center'
        }}>
        <Menu
          visible={this.state.visible}
          onDismiss={this._closeMenu}
          anchor={
            < TouchableOpacity
              onPress={this._openMenu}
              style={{ marginHorizontal: 20 }}
            >
              <MaterialCommunityIcons name="earth" size={30} style={{ color: 'black' }} />
            </TouchableOpacity>
          }
        >
          <Menu.Item onPress={() => { }} title="Item 1" />
          <Menu.Item onPress={() => { }} title="Item 2" />
          <Divider />
          <Menu.Item onPress={() => { }} title="Item 3" />
        </Menu>
      </View>
    );
  }
  //[ TEST DROP DOWN MENU ]

  render() {
    return (
      <Provider>
        {this.renderMenuExample()}
      </Provider>
    );
  }
}

export default Register;

App.js：

import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Register"
          component={Register}
          options={{
            headerBackImage: () => (
              <AntDesign name="close" size={30} style={{ color: 'white' }} />
            ),
            headerTitle: () => (
              <View>
                <Text style={{ flex: 1, fontSize: 20, fontWeight: 'bold', alignSelf: 'center', color:                   'white' }}>
                  Register
                </Text>
              </View>
            ),
            headerRight: () => (
              <TouchableOpacity
                onPress={() => {/* I WANT TO SHOW THE MENU HERE */ }}
                style={{ marginHorizontal: 20 }}
              >
                <MaterialCommunityIcons name="earth" size={30} style={{ color: 'white' }} />
              </TouchableOpacity>
            ),
            headerStyle: {
              backgroundColor: '#2e46ff',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

屏幕截图 ：

Answer 1

一种可能的解决方案是用提供者包装导航容器，并为菜单设置一个单独的组件。尝试过将它与您的零食搭配使用

代码如下。

const CustomMenu = () => {
  const [showMenu, setShowMenu] = React.useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="earth"
              size={30}
              style={{ color: 'black' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => {}} title="Item 1" />
        <Menu.Item onPress={() => {}} title="Item 2" />
        <Divider />
        <Menu.Item onPress={() => {}} title="Item 3" />
      </Menu>
    </View>
  );
};

function App() {
  return (
    <Provider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Register"
            component={Register}
            options={{
              headerBackImage: () => (
                <AntDesign name="close" size={30} style={{ color: 'white' }} />
              ),
              headerTitle: () => (
                <View>
                  <Text
                    style={{
                      flex: 1,
                      fontSize: 20,
                      fontWeight: 'bold',
                      alignSelf: 'center',
                      color: 'white',
                    }}>
                    Register
                  </Text>
                </View>
              ),
              headerRight: () => <CustomMenu />,
              headerStyle: {
                backgroundColor: '#2e46ff',
              },
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

反应导航标题按钮（V5 /版本5.x）：显示菜单项

1 个答案: