TouchableOpacity onpress 不适用于导航

Question

我正在使用 react native Navigation，并且在使用 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. 不应将 Switch 放置在会导致错误的图标内
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>