react-native - TouchableRipple onPress 不适用于反应导航

Question

我在我的应用程序中使用堆栈导航器来浏览不同的组件。但在这里我面临两个不同的问题。问题（1）我使用开关在深色和浅色主题之间切换，在模块中，使用 onPress 时它工作正常，但通过堆栈屏幕调用时它不起作用。问题（2）我想在标题文本和切换按钮之间留出一些空间，但每次我为切换组件添加一些填充时，它也会应用于标题文本。我该如何解决这些问题？这是 App.js 组件代码：

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

import React from 'react';
import {StatusBar, View} 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} from 'react-native-paper';

const Stack = createStackNavigator();


const App = () => {


  const Darkthemebtntoggle = () => {
    return (
        <Details />
      
    );
  };

  return (
    <>
   
      <NavigationContainer>
        <StatusBar barStyle="dark-content" />
        <Stack.Navigator screenOptions={{headerTitleAlign: ''}}>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerTitle: (props) => (
                  <Darkthemebtntoggle {...props} />
              ),
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </> 
  );
};

export default App;

这里也是 Details.js 组件代码：

import React, {useState} from 'react';
import {View, Text} from 'react-native';
import {TouchableRipple, Switch, Title} from 'react-native-paper';

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

  const togglemethod = () => {
    setDarkTheme(!isDartheme);
  };
  return (
    <View style={{flexDirection:"row"}}>
        <View >
             <Title>
            <Text >Home</Text>
          </Title>
        </View>
     
      <View style={{ paddingLeft:10, flexDirection:"row"}}>
        <TouchableRipple
          onPress={() => {
            togglemethod();
          }}>
          <View pointerEvents="none">
            <Switch value={isDartheme} />
          </View>
        </TouchableRipple>
      </View>
    </View>
  );
}

export default Details;

这是标头行为的屏幕截图：