在 react-navigation 上调整堆栈 header 中的开关和图标

Question

我试图将一个 Switch 和一个 Icon 放在 header 上，该 header 使用反应导航中的堆栈导航创建。我面临的问题是相应地调整彼此相邻的开关和图标。我尝试了不同的选择，但仍然无法调整它们。我想在 header 中间显示一段文字；例如 Home，并在 header 的右侧显示开关和图标（开关和图标）。我将非常感谢我如何做到这一点的任何帮助？在这里，我正在分享我尝试这样做的代码。

/**
 * 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,
  DarkTheme as navigationDarkTheme,
  DefaultTheme as navigationDefaultTheme,
  useTheme
} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {
  DarkTheme as PaperDarkTheme,
  Provider as PaperProvider,
  DefaultTheme as PaperDefaultTheme,
  Text,
  Title,
  TouchableRipple,
  Switch,
} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';



const customDarktheme = {
  ...PaperDarkTheme,
  ...navigationDarkTheme,
  colors: {
    ...PaperDarkTheme.colors,
    ...navigationDarkTheme.colors,
    headerColor: 'rgb(255, 255, 255)',
    bgcolor: "#404040",
    surface:"#404040",
    btnSearchColor:"#404040",
  }
}

const customDefaulttheme = {
  ...PaperDefaultTheme,
  ...navigationDefaultTheme,
  colors: {
    ...PaperDefaultTheme.colors,
    ...navigationDefaultTheme.colors,
    headerColor: "white",
    bgcolor: "#fafcff",
    btnSearchColor:"#006aff",
    surface:"white",
  }
}

const HomeS = () => {
  return <View></View>;
};

const Stack = createStackNavigator();

const App = () => {
  const {colors} = useTheme()
  const [isDarktheme, setDarkTheme] = useState(false);

  const togglemethod = () => {
    setDarkTheme(!isDarktheme);
   
  };

  return (
    <>
      <PaperProvider theme={isDarktheme?customDarktheme:customDefaulttheme}>
        <NavigationContainer theme={isDarktheme?customDarktheme:customDefaulttheme}>
          <StatusBar barStyle="dark-content" />
          <Stack.Navigator screenOptions={{headerTitleAlign: 'center',  headerStyle: { backgroundColor: colors.headerColor }}}>
            <Stack.Screen
              name="Home"
              component={HomeS}
              options={{
                headerTitle: (props) => (
                  <View style={{flexDirection: 'row', width:"300%"}}>
                  <>
                    <View>
                      <Title style={{paddingLeft: 180}}>
                        <Text>Home</Text>
                      </Title>
                    </View>

                    <View >
                      <TouchableRipple rippleColor="rgba(0, 0, 0, .32)">
                        <Switch
                          value={isDarktheme}
                          color="yellow"
                          onValueChange={() => togglemethod()}
                          style={{
                            paddingLeft:250,
                          }}
                        />
                      </TouchableRipple>
                      </View>
                      <View style={{}}>
                        <MaterialCommunityIcons
                          name={
                            isDarktheme
                              ? 'moon-waning-crescent'
                              : 'white-balance-sunny'
                          }
                          size={25}
                          color={isDarktheme ? "yellow" : "blue"}
                          style={{
                            paddingLeft: 110,
                           // paddingBottom: 5,
                            width: '200%',
                            flexDirection: 'row',
                            paddingRight:300
                          }}
                        />
                      </View>
                      </>
                    
                  </View>
                ),
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </PaperProvider>
    </>
  );
};

export default App;

目前 header 看起来像这样：

看距离b/w开关和图标。试图消除这一点对我来说是不可能的。例如，文本 Home 在调整其他元素（如开关或图标）时消失。我知道这是可以实现的。但我运行别无选择，很高兴有人能做到并从中学习。

Answer 1

既然你想在右边添加开关和图标，你应该使用headerRight而不是headerTitle

options={{
  headerRight: () => (
    <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
      // Your switch and icon here
    </View>
  ),
}}

在 react-navigation 上调整堆栈 header 中的开关和图标

adjusting Switch and Icon in stack header on react-navigation

react-native

react-native-android

react-navigation

react-navigation-stack

react-navigation-v5