TouchableOpacity onpress 不适用于导航

Question

我正在使用 React Native 导航，并在标题内放置了一个开关，以在使用 touchableOpacity onPress 属性时在浅色和深色主题之间切换。没有错误日志，当我按下开关时，touchableOpacity onpress 不会启动。我确实分享了我的 App.js 代码，如果您能看到并指出我做错的地方，我将不胜感激。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {StatusBar, View, TouchableOpacity} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import Home from './src/screens/Home';
import Details from './src/screens/Details';
import {createStackNavigator} from '@react-navigation/stack';
import {DarkTheme, Text, Title, TouchableRipple, Switch} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Stack = createStackNavigator();


const App = () => {

  const [isDartheme, setDarkTheme] = useState(false);

  const togglemethod = () => {
      console.log("Called!");
    setDarkTheme(!isDartheme);
  };


  return (
    <>

          
      <NavigationContainer>
        <StatusBar barStyle="dark-content" />
        <Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerTitle: (props) => (
                <View style={{ flexDirection: 'row'}}>
                <View>
                  <Title style={{paddingLeft: 130}}>
                    <Text>Home</Text>
                  </Title>
                </View>
          
                
                  <View >
                    <TouchableOpacity
                      onPress={ () => {togglemethod() }
                      }
                      centered ={true}
                      >
                          <MaterialCommunityIcons
                        name={isDartheme?'moon-waning-crescent': 'white-balance-sunny'}
                        size = {25}
                        color= "blue"
                        style={{paddingLeft: 110, paddingBottom:5, width: '200%'}}
                        > 
                      <Switch
                        value={isDartheme}
                        color="red"
                        style={{paddingLeft: 8}}
                      />
                      </MaterialCommunityIcons>
                    </TouchableOpacity>
                  </View>
                </View>
                  
              ),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </> 
  );
};

export default App;

Answer 1

您调用的方法存在拼写错误，请将 onPress 从

togglemlethod

更改为

togglemethod

Answer 2

这是代码的工作版本，

1. 不应将开关放置在图标内，否则会导致错误
2. 您可以使用开关本身来触发切换，

您必须根据需要更改样式，但这在 Android 上运行良好。

 <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitle: (props) => (
              <View style={{ flexDirection: 'row' }}>
                <View>
                  <Title style={{ paddingLeft: 130 }}>
                    <Text>Home</Text>
                  </Title>
                </View>

                <View>
                  <TouchableOpacity
                    onPress={() => {
                      togglemethod();
                    }}
                    centered={true}
                    style={{ flexDirection: 'row',alignItems:'center' }}>
                    <Switch
                      value={isDartheme}
                      color="red"
                      onValueChange={() => togglemethod()}
                    />
                    <MaterialCommunityIcons
                      name={
                        isDartheme
                          ? 'moon-waning-crescent'
                          : 'white-balance-sunny'
                      }
                      size={25}
                      color="blue"
                      style={{
                        paddingBottom: 5,
                      }}></MaterialCommunityIcons>
                  </TouchableOpacity>
                </View>
              </View>
            ),
          }}
        />
      </Stack.Navigator>

Answer 3

我正在使用 @react-navigation/native 中的 useNavigation 挂钩在按下按钮时切换抽屉。以下代码非常适合我：

import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const MyComponent = () => {
  const navigation = useNavigation();

  return (
    <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
      <Ionicons name="menu" size={30} color="#fff" />
    </TouchableOpacity>
  );
};

按下按钮时，抽屉成功打开。如果有人遇到类似问题，我希望这会有所帮助！如果您有任何疑问或需要澄清，请随时联系。