问题[react-native](coding)

我已经开始学习 React Native。

我有一个简单的应用程序并开始添加导航。

我正在尝试创建一个游戏，并且想在屏幕之间导航。代码可以运行，但是应用程序顶部有一个栏。

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native'; // Only here
import { createStackNavigator } from '@react-navigation/stack';
import MenuScreen from './MenuScreen';
import GameScreen from './GameScreen';
import SettingsScreen from './SettingsScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
      <Stack.Navigator initialRouteName="Menu">
        <Stack.Screen name="Menu" component={MenuScreen} />
        <Stack.Screen name="GameScreen" component={GameScreen} />
        <Stack.Screen name="SettingsScreen" component={SettingsScreen} />
      </Stack.Navigator>
  );
};

export default App;

菜单屏幕

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const MenuScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Game Menu</Text>
      <Button title="Play" onPress={() => navigation.navigate('GameScreen')} />
      <Button title="Settings" onPress={() => navigation.navigate('SettingsScreen')} />
      <Button title="Exit" onPress={() => console.log('Exit Game')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#282c34',
  },
  title: {
    fontSize: 30,
    color: '#ffffff',
    marginBottom: 20,
    fontWeight: 'bold',
  },
});

export default MenuScreen;

我该如何删除它？

如果不可能，我应该用什么来替代？

我正在 React Native 中实现一个模态框，并希望创建一个独特的滚动效果，其中模态框具有圆角，可根据滚动位置动态调整。具体来说，我希望模态框看起来像一个可滚动的页面，两端都有圆角 - 查看内容顶部时，顶角应该是圆的；查看底部时，底角应该是圆的；滚动中间部分时，角应该是方形的。这会产生类似于通过窗口查看圆形卡片的效果，其中圆边仅在该部分可见时可见。目标是保持圆形卡片的视觉隐喻，同时提供滚动位置的清晰指示。

所以目前我有类似的东西：

<View style={{borderRadius: 8}}>
  <ScrollView>
     // ... some content
  </ScrollView>
</View>

它的角总是圆的，但如果只在顶部和底部圆，那就太酷了……这似乎可能是一个标准效果，但我以前没有做过太多的前端

我有以下代码并且拦截器工作得很好：

import axios from 'axios';
import { useDispatch } from 'react-redux';

const axiosPrivate = axios.create({
    baseURL: 'http://localhost:8080'
});

export default useAxiosPrivate = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const responseIntercept = axiosPrivate.interceptors.response.use(
            response => response,
            async (error) => {
                const prevRequest = error?.config;
                if (error.response?.status === 401 && error.response.data?.code === 'AccessTokenExpired' && !prevRequest.sent) {
                    prevRequest.sent = true;
                    const { refreshToken } = await getData();
                    return axios.post('http://localhost:8080/auth/refresh-token', { refreshToken })
                        .then(async (_) => {
                            return axiosPrivate(prevRequest);
                        })
                        .catch(async (error) => {
                            dispatch(login({ name: '', id: '' }));
                            return Promise.reject(error);
                        });
                }
                return Promise.reject(error);
            }
        );

        return () => {
            axiosPrivate.interceptors.response.eject(responseIntercept);
        }
    }, [])

    return axiosPrivate;
}

然而，出于好奇，我尝试将 axiosPrivate 常量放置在组件代码中，如下所示：

export default useAxiosPrivate = () => {
    const axiosPrivate = axios.create({
        baseURL: 'localhost:8080'
    });

    const dispatch = useDispatch();
...}

执行此操作时，在某些组件中 useAxiosPrivate 钩子拦截器可以正常工作，而在其他组件中则无法正常工作，就好像它们不存在一样。

谁能告诉我为什么会出现这种现象？

我尝试在我的 expo react-native 项目中使用 Tailwind 为视图或按钮等组件设置动画，但没有成功，此外，在网站文档中我注意到它支持动画和过渡强大的动画 - 通过 react-native-reanimated 完全支持 Tailwind 的动画类和自定义关键帧动画

🔄 过渡 - 样式状态之间的平滑过渡，包括暗模式变化和动态更新
https://www.nativewind.dev/

 <Button title='press' className="transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 ..."/>

我遇到了一个问题，在为应用程序添加风格后，我无法让 React Native 应用程序连接到 metro 捆绑器。我搜索了很多可能的解决方案，但无法使其工作。当我使用通过 USB 连接的物理设备时会发生此问题。在添加风格之前，USB 调试已打开，一切正常。我需要使用物理设备来测试一些蓝牙功能。

这是我添加到我的 gradle 文件中的内容：

debuggableVariants = ["localDebug"]

flavorDimensions "default"
    productFlavors {
        local {
            resValue "string", "app_name", "Note Ninja (Debug)"
            applicationIdSuffix ".debug"
            versionNameSuffix "-debug"
            buildConfigField "String", "FLAVOR_NAME", "\"local\""
        }
        internal {
            resValue "string", "app_name", "Note Ninja (Internal Testing)"
            versionNameSuffix "-internal"
            buildConfigField "String", "FLAVOR_NAME", "\"internal\""
        }
        prod {
            resValue "string", "app_name", "Note Ninja"
            buildConfigField "String", "FLAVOR_NAME", "\"prod\""
        }
    }

现在我将我的 npm 脚本调整如下： "android:local": "react-native run-android --mode=localDebug --appId com.noteninja.debug",

当我运行此脚本时，metro 正在启动，并且应用程序已安装在手机上，但我收到错误消息“无法加载脚本。请确保您正在运行 Metro，或者该软件包‘index.android.bundle’已正确打包以供发布。当我单击重新加载时，我收到错误消息“无法连接到开发服务器”。

我尝试在手机浏览器中打开 localhost:8081，我可以访问 metro，所以这似乎不是防火墙问题。我尝试了 adb reverse tcp:8081 tcp:8081，但这也没有帮助（当我使用 adb devices 时，设备已连接，因为它已列出）。我卸载了应用程序，清除了 gradle 和 metro 缓存，但似乎没有任何帮助。

我以前用过 clerk 进行身份验证。但是今天出现的错误很奇怪。有人遇到过吗？

"status": 400,
"clerkError": true,
"errors": [
    {
      "code": "captcha_missing_token",
      "message": "Missing CAPTCHA token",
      "longMessage": "Missing CAPTCHA token",
      "meta": {}
    }
  ]
}

我已严格按照注册步骤操作，但遇到了这个错误

当我运行新创建的普通 React Native 应用程序时发生此错误：

npx @react-native-community/cli@latest init <Project Name>

在我保证

npx react-native doctor

确保所有要求都已满足（我的要求已满足）

最后，我尝试使用

npx react-native run-android

这将通过错误

id: com.facebook.react.settings

我尝试删除该文件夹android\.gradle并再次运行服务器并清除缓存

npm start --reset-cache 

再次出现同样的错误

有人有任何解决方案或建议吗？

我想使用 useLayoutEffect 制作自定义标题，但它对我来说不起作用。如果有人能帮忙就太好了。

useLayoutEffect(() => {
  navigation.setOptions({
    headerTitle: "Hello",
    headerStyle: {
      backgroundColor: "#00CED1",
    },
    headerLeft: () => (
      <Image
        style={{ width: 140, height: 120, resizeMode: "contain" }}
        source={{
          uri: "https://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c518.png",
        }}
      />
    ),
    headerRight: () => (
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          gap: 6,
          marginRight: 12,
        }}
      >
        <Ionicons name="notifications-outline" size={24} color="black" />

        <AntDesign name="search1" size={24} color="black" />
      </View>
    ),
  });
}, []); 
return (
    <ScrollView style={{ padding: 10, flex: 1, backgroundColor: "white" }}>
    <Text style={{ fontSize: 16, fontWeight: "bold" }}>
      Welcome Sanju
    </Text>
    </ScrollView>
   
  )
}

以上代码未显示自定义标题。仅显示“Welcome Sanju”。提前致谢

我是 React 新手，我正在尝试编写一个包含不同组的组件，每个组都累积了一定数量的点，每个组包含不同的复选框，我希望当单击复选框时，数量会以正确的方式更新（添加/减去取决于复选框状态）

这是我尝试检查其是否正常工作的代码（我省略了不相关的代码并包含）：

export default function Tracker() {

 
const [amountMust, setAmountMust] = React.useState(0); // 84
const [amountListA, setAmountListA] = React.useState(0); // 24.5
const [amountMalag, setAmountMalag] = React.useState(0); //6
const [amountSport, setAmountSport] = React.useState(0); //2
const [amountScience, setAmountScience] = React.useState(0); // 8
const [amountGeneral, setAmountGeneral] = React.useState(0); // 2
const [amountProject, setAmountProject] = React.useState(0); // 2
const [amountEnglish, setAmountEnglish] = React.useState(0); // 2


const courses = [
      { number: "101", name: "Mathematics", points: 3 },
      { number: "102", name: "Physics", points: 4 },
      { number: "103", name: "Chemistry", points: 2 },
    ];

    const CheckBoxState = ({ points, groupSetter }) => {
      const [isChecked, setIsChecked] = React.useState(false);
  
      const handleCheckboxChange = (e) => {
            const newChecked = e.target.checked;
            setIsChecked(newChecked);       
            groupSetter ((prevGroupPoints) =>
            newChecked ? prevGroupPoints + points : prevGroupPoints - points);      
      };
  
      return (
        <Checkbox
          variant="soft"
          size="md"
          color="success"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
      );
    };

    const CourseList = ({ courses }) => {
      return (
            
        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {courses.map((course) => (
            <FormControl
              sx={{
                display: "flex",
                flexDirection: "row",
                gap: 1,
                border: "1px solid #ccc",
                borderRadius: 2,
                padding: 2,
              }}
            >
              <Box sx={{ display: "fixed", alignItems: "center", gap: 2 }}>
                <CheckBoxState points={course.points} groupSetter={setAmountMust}/>
                <Typography variant="body2">{course.number}</Typography> 
                <Typography variant="body2">{course.name}</Typography>
                <Typography variant="body2">נק"ז: {course.points}</Typography>
            </Box>
              <Box sx={{ display: "flex", gap: 2, mt: 2, marginLeft: 1 }}>
                <FormControl>
                  <FormLabel>Option 1</FormLabel>
                  <Switch size="sm" />
                </FormControl>
                <FormControl>
                  <FormLabel>Option 2</FormLabel>
                  <Switch size="sm" />
                </FormControl>
              </Box>
            </FormControl>
          ))}
        </Box>
      );
    };


  return (
      <div className='box'>
            <CourseList />
      </div>

  );
}

问题是当调用时，groupSetter复选框状态不会改变且保持未选中状态，并且每次单击时都会一遍又一遍地handleCheckboxChange添加该值，但是当删除或传递不依赖于先前状态的常规值时，它就会起作用。amountMustgroupSetter

将状态设置器和值传递给复选框组件的目的是因为我想在代码中将此组件用于不同的组。

随着 React Native 0.76 版本的发布，有一个新的 devTools，我想知道 Apollo Client Devtools 是否与它兼容。