主页 / coding / 问题

问题[react-native](coding)

Martin Hope
robo
Asked: 2025-02-04 17:45:52 +0800 CST
  • 5

我正在使用 Expo Navigation（Stack Navigator）和 React Query 构建一个 Expo React Native 应用。在屏幕之间导航时（例如，从主页到测试屏幕再返回），我需要在返回上一个屏幕时重新获取数据。问题是组件在导航时不会重新安装，因此查询功能不会触发/

react-native
Martin Hope
Wagner Gauer
Asked: 2025-01-19 09:20:53 +0800 CST
  • 6

我正在尝试使用用户状态来确定我的应用是否显示身份验证组，但现在我明白我的设置无法工作，因为根布局组件无法访问状态。

我怎样才能实现我的目标？

import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import { Drawer } from "expo-router/drawer";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";
import { useColorScheme } from "@/hooks/useColorScheme";
import { selectCurrentUser } from "@/store/auth/authSlice";
import { useSelector } from "react-redux";
import "react-native-gesture-handler";
import { Provider } from "react-redux";
import store from "../store/store";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const currentUser = useSelector(selectCurrentUser);
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (

    <Provider store={store}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        {currentUser ? (
          <Drawer>
            <Drawer.Screen name="(tabs)" options={{ headerShown: false }} />
            <Drawer.Screen name="+not-found" />
          </Drawer>
        ) : (
          <Stack>
            <Stack.Screen
              name="(authentication)"
              options={{ headerShown: false }}
            />
          </Stack>
        )}

        <StatusBar style="auto" />
      </ThemeProvider>
    </Provider>
  );
}

我尝试使用选择当前用户但出现此错误：找不到 react-redux 上下文值

react-native
Martin Hope
agent_bean
Asked: 2025-01-07 07:44:14 +0800 CST
  • 5

我已经开始学习 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
Martin Hope
financial_physician
Asked: 2025-01-02 15:52:19 +0800 CST
  • 5

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

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

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

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

react-native
Martin Hope
Bruno Nobre
Asked: 2024-12-29 00:03:29 +0800 CST
  • 5

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

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 钩子拦截器可以正常工作，而在其他组件中则无法正常工作，就好像它们不存在一样。

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

react-native
Martin Hope
Nejib Afdhal
Asked: 2024-12-25 19:38:18 +0800 CST
  • 5

我尝试在我的 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
Martin Hope
Krzysztof Chabowski
Asked: 2024-12-20 20:08:06 +0800 CST
  • 5

我遇到了一个问题，在为应用程序添加风格后，我无法让 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 缓存，但似乎没有任何帮助。

react-native
Martin Hope
Umar Milanzi Snr
Asked: 2024-12-08 19:48:33 +0800 CST
  • 5

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

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

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

react-native
Martin Hope
Srikanth Sankar
Asked: 2024-11-22 16:19:03 +0800 CST
  • 6

当我运行新创建的普通 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

再次出现同样的错误

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

react-native
Martin Hope
Sanju
Asked: 2024-11-22 14:53:55 +0800 CST
  • 6

我想使用 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-native