React Native跳转Settings页面遇类型不匹配及样式错误求助

两个问题的原因及解决方案： #

1. 导航跳转类型不匹配错误 #

原因：TypeScript未识别"Settings"为合法路由名称，缺少导航栈的类型定义，导致navigation.navigate的参数类型校验失败。

修复方案：

• 定义包含所有路由的栈类型
• 使用useNavigation时指定该类型，让TypeScript识别合法路由

2. Button组件style属性无效 #

原因：React Native原生Button组件不支持直接通过style属性自定义样式，该组件样式由平台原生控件控制，仅能通过color等有限属性调整。

修复方案：

• 方案一：将Button包裹在View中，通过View的style控制布局
• 方案二：改用TouchableOpacity配合Text组件，完全自定义按钮样式

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet, Image, Animated, Switch, TouchableOpacity, Button } from "react-native";
import { Magnetometer } from "expo-sensors";
import { useNavigation } from "@react-navigation/native";
import { createStackNavigator, StackNavigationProp } from "@react-navigation/stack";
import SettingsScreen from "./SettingsScreen";

// 定义导航栈的路由类型
type RootStackParamList = {
  Home: undefined; // 当前页面路由名称，根据实际栈配置调整
  Settings: undefined; // Settings页面路由
};

// 定义当前页面的导航类型
type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, "Home">;

const App: React.FC = () => {
    const [heading, setHeading] = useState<number>(0);
    const [darkMode, setDarkMode] = useState<boolean>(false);
    const rotateValue = new Animated.Value(0);
    // 指定导航类型
    const navigation = useNavigation<HomeScreenNavigationProp>();

    useEffect(() => {
        let subscription: any;

        const degreeUpdateRate = 3;

        const startMagnetometer = async () => {
            const isAvailable = await Magnetometer.isAvailableAsync();
            if (isAvailable) {
                subscription = Magnetometer.addListener((data) => {
                    const { x, y, z } = data;
                    const magneticHeading = Math.atan2(y, x) * (180 / Math.PI);
                    setHeading(magneticHeading);

                    Animated.timing(rotateValue, {
                        toValue: magneticHeading,
                        duration: 100,
                        useNativeDriver: false,
                    }).start();
                });

                Magnetometer.setUpdateInterval(degreeUpdateRate);
            } else {
                console.log("Magnetometer is not available.");
            }
        };

        startMagnetometer();

        return () => {
            subscription?.remove();
        };
    }, []);

    const rotateStyle = {
        transform: [{ rotate: `${-heading}deg` }],
    };

    const toggleDarkMode = () => {
        setDarkMode((prevMode) => !prevMode);
    };

    return (
        <View style={[styles.container, darkMode && styles.darkMode]}>
            <Text style={[styles.appName, darkMode && styles.darkText]}>Prom Date Finder</Text>
            <View style={styles.compassContainer}>
                <Animated.Image
                    source={require("./images/compassarrowonly.png")}
                    style={[styles.compassImage, rotateStyle]}
                />
            </View>

            {/* 方案一：用View包裹Button控制样式 */}
            <View style={styles.settingsButtonContainer}>
                <Button
                    title="Settings"
                    onPress={() => navigation.navigate("Settings")}
                    color={darkMode ? "#fff" : "#007AFF"}
                />
            </View>

            {/* 方案二：使用TouchableOpacity自定义按钮（推荐） */}
            {/* <TouchableOpacity 
                style={[styles.settingsButton, darkMode && styles.darkButton]}
                onPress={() => navigation.navigate("Settings")}
            >
                <Text style={[styles.settingsButtonText, darkMode && styles.darkText]}>Settings</Text>
            </TouchableOpacity> */}

            <View style={styles.switchContainer}>
                <Text style={[styles.switchText, darkMode && styles.darkText]}>Dark Mode</Text>
                <Switch
                    value={darkMode}
                    onValueChange={toggleDarkMode}
                />
            </View>
        </View>
    );
};

// 样式定义
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#fff",
    },
    darkMode: {
        backgroundColor: "#121212",
    },
    appName: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 30,
        color: "#000",
    },
    darkText: {
        color: "#fff",
    },
    compassContainer: {
        marginVertical: 40,
    },
    compassImage: {
        width: 200,
        height: 200,
    },
    // Button容器样式
    settingsButtonContainer: {
        marginVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 8,
        overflow: "hidden",
    },
    // TouchableOpacity按钮样式
    settingsButton: {
        backgroundColor: "#007AFF",
        paddingVertical: 12,
        paddingHorizontal: 24,
        borderRadius: 8,
        marginVertical: 10,
    },
    darkButton: {
        backgroundColor: "#2C6BED",
    },
    settingsButtonText: {
        color: "#fff",
        fontSize: 16,
        fontWeight: "500",
    },
    switchContainer: {
        flexDirection: "row",
        alignItems: "center",
        gap: 10,
        marginTop: 20,
    },
    switchText: {
        fontSize: 16,
        color: "#000",
    },
});

export default App;

额外说明 #

• 确保导航栈配置中已注册Settings页面，示例配置：

  const Stack = createStackNavigator<RootStackParamList>();
  
  function NavigationContainer() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={App} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    );
  }
  

• TouchableOpacity按钮必须用Text组件包裹文本，否则无法正确渲染和响应点击。

内容的提问来源于stack exchange，提问作者Jutey