主页 / coding / 问题

问题[react-native](coding)

Martin Hope
Bineesh Kumar
Asked: 2024-11-10 05:55:39 +0800 CST
  • 5

REACT NATIVE 疑问：尝试读取数据库并创建内容数组。在代码中，更新数组“rcpts”后，尝试访问 db.transaction 块外部时，它仍为空。如何真正更新该块内的数组？我问 bcz，似乎即使在 db.transaction 块的 while 循环内更新后，数组仍为空或保持其原始形式。

let rcpts = []

const db = SQLite.openDatabase('digit.db');
//date, agentNo, custName, custNo, paidAmount, custBalance, payMode, revGroup FROM tblRcpt ORDER BY Id DESC LIMIT 100 
function pushreceipts(){  
  let rcptlist =[];
  //Alert.alert("you clicked");
    db.transaction(tx=>{
      tx.executeSql("SELECT id,date, agentNo, custName, custNo, paidAmount, custBalance, payMode, revGroup FROM tblRcpt ORDER BY Id DESC LIMIT 100 ",
        null,(tx,result)=>{          
          let len = result.rows.length;
          if (len>0){
            for(let i =0;i<len;i++){
              let item = result.rows.item(i);              
              rcptlist.push({
                rcptNo : item.id,
                rcptdate : item.date,
                agentNo : item.agentNo,
                custName : item.custName,
                custNo : item.custNo,
                paidAmount : item.paidAmount,
                custBalance : item.custBalance,
                payMode : item.payMode,
                revGroup : item.revGroup
              });
              i++;
            } 
          }
          rcpts = rcptlist;
          Alert.alert("Data Push finished.")
          //Alert.alert("Survey Added");
        }),
        (error) =>{
          Alert.alert(error);
        }
      }
    )
    // **** Read the rcps Array and send using fetch here. ****
    let qty = rcpts.length;
    let i = 0;
    console.log(rcpts.length)
    while(i<qty+1){
      console.log('length of rcpts array'+rcpts.length);

      i++;
    }

  

}

react-native
Martin Hope
Misha
Asked: 2024-11-05 14:11:16 +0800 CST
  • 5

我正在与 Expo 合作开发 react-native，并且想要

import { Select } from "antd";

代码如下：

import { useState } from "react";
import { Select } from "antd";

const App = () => {
  const [openSelect, setOpenSelect] = useState(false);

  const options = [
    { value: "country1", label: "Country1" },
    { value: "country2", label: "Country2" },
    { value: "country3", label: "Country3" },
    { value: "country4", label: "Country5" }
  ];
  return (
    <>
      <Select
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Select countries"
        options={options}
        size="large"
        open={openSelect}
        onDropdownVisibleChange={() => setOpenSelect(true)}
        onChange={() => setOpenSelect(false)}
      />
    </>
  );
};
export default App;

每次我从“antd”导入时，我在 Expo go 中都会收到一条错误消息（在真实手机上）

Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`). Make sure to start component names with a capital letter

我认为有些东西与 antd 不兼容，所以这是我的 package.json

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-community/picker": "1.6.0",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.29",
    "@types/react-native-snap-carousel": "^3.8.11",
    "antd": "^5.21.6",
    "axios": "^1.7.2",
    "expo": "~51.0.38",
    "expo-application": "~5.9.1",
    "expo-build-properties": "~0.12.5",
    "expo-camera": "~15.0.16",
    "expo-chart-kit": "^1.2.4",
    "expo-constants": "^16.0.2",
    "expo-device": "^6.0.2",
    "expo-font": "~12.0.10",
    "expo-image-picker": "~15.0.7",
    "expo-insights": "~0.7.0",
    "expo-linear-gradient": "~13.0.2",
    "expo-localization": "~15.0.3",
    "expo-location": "^17.0.1",
    "expo-notifications": "~0.28.19",
    "expo-random": "~14.0.1",
    "expo-splash-screen": "~0.27.6",
    "expo-status-bar": "~1.12.1",
    "expo-updates": "~0.25.27",
    "i18n-js": "^3.7.1",
    "moment": "^2.29.1",
    "react": "18.2.0",
    "react-devtools": "^4.8.2",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-dots-pagination": "^0.3.1",
    "react-native-element-dropdown": "^2.12.0",
    "react-native-fbsdk-next": "^13.0.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^9.0.0",
    "react-native-modal-selector": "^2.0.3",
    "react-native-options-menu": "^2.0.2",
    "react-native-pager-view": "6.3.0",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-snap-carousel": "github:capelski/react-native-snap-carousel",
    "react-native-svg": "15.2.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-vector-icons": "^9.0.0",
    "react-native-webview": "13.8.6",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
    "reanimated-color-picker": "^3.0.4",
    "typescript": "~5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "babel-preset-expo": "~11.0.0"
  },
  "private": true,
  "name": "app1",
  "version": "1.0.0",
  "description": "some",
  "keywords": [
    "marketing"
  ],
  "author": "some",
  "license": "MIT"
}

我尝试了很多方法来解决这个问题，但到现在为止都没有成功

我搜索了很多，但到现在还没有找到

react-native
Martin Hope
alex
Asked: 2024-10-25 16:44:27 +0800 CST
  • 5

当我在用户浏览屏幕时实现自定义动画时，我收到类型错误。在 Stack Navigator 部分，使用自定义动画的可用属性，即 transitionSpec


import { Easing, StyleSheet, Text, View } from "react-native";

import Home from "./screens/Home";
import Details from "./screens/Details";

import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";
export type RootStackParamList = {
  Home: undefined; // No parameters expected for Home screen
  Details: undefined;
};

const Config = {
  animation: "spring",
  config: {
    stiffness: 1000,
    damping: 50,
    mass: 3,
    overshootClamping: false,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
  },
};
const closeConfig = {
  animation: "timing",
  config: {
    duration: 200,
    easing: Easing.linear,
  },
};

const Stack = createStackNavigator<RootStackParamList>();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          gestureDirection: "horizontal",
          transitionSpec: {
            open: Config,
            close: closeConfig,
          },
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

我得到的类型错误是在 open 和 close 属性的 transitionSpec 中。下面是我发布的错误 [![当我为屏幕转换实现自定义动画并使用 React-Navigation/native 时，我收到以下错误，但是在模拟器上运行时应用程序中没有错误？

react-native
Martin Hope
RasyaJusticio
Asked: 2024-09-25 15:40:43 +0800 CST
  • 5

我正在使用 Expo 51，在使用 React Native 的 TextInput 时遇到了问题。使用自定义字体时，文本下方似乎有一些不需要的空间。字体本身来自 Expo 的 Google Fonts (Poppins)。

字体本身在Text组件中表现正确。但在 中则不然TextInput。

截屏

我尝试使用textAlignVerticalprop 并将值设置为bottom，但它仍然相同。我期望它看起来像这样（这是使用默认的 fontFamily）。

<RNTextInput
    style={{
        width: 200,
        fontFamily: 'Poppins_400Regular',
        fontSize: 30,
        backgroundColor: "rgb(245 245 245)"
    }}
    textAlignVertical={'bottom'}
    multiline={false}
/>

只是为了澄清一下，RNTextInput这不是一个自定义组件，它只是一个重命名的TextInput组件react-native。

react-native
Martin Hope
Sharon
Asked: 2024-09-25 00:33:03 +0800 CST
  • 6

我在网上看到了一些解决方案，但我无法让它们发挥作用。

我有一个 React Native 应用，它从 API 加载数据。数据是分页的；每次我检索一个页面时，我都会收到该页面的结果以及下一页的 URL。因此，API 的典型响应采用以下格式（显然它比这更复杂一些，但这是要点）：

{
  data: [
    { key: xx, title: 'Item 1' },
    { key: yy, title: 'Item 2' }
  ], 
  next: 'www/url/to/next/page/of/results'
}

我想在屏幕上显示每个项目，并且当用户滚动到屏幕底部时，应该加载下一组结果。我正在尝试FlatList为此使用。

到目前为止我已经（我还没有进行任何类型的错误检查或任何操作；只是试图先让它工作）：

const HomeScreen = () => {
  const [next, setNext] = React.useState<string>(BASE_URL); // URL of first page of results
  const [isLoading, setIsLoading] = React.useState<boolean>(true);
  const [displayItems, setDisplayItems] = React.useState<Item[]|null>(null);

  // Get next page of items
  const fetchItems = async () => {
    setIsLoading(true);
    const response = await client(next, 'GET'); // Just calls axios
    setDisplayItems((items) => items.concat(response.data));
    setNext(response.next);
    setIsLoading(false);
  };

  // Get items on first loading screen
  React.useEffect(() => {
    fetchItems();
  }, [fetchItems]);

  // Show items
  if (isLoading) return <LoadingSpinner />
  if (displayItems && displayItems.length === 0) return <Text>Nothing to show</Text>
  return <FlatList
        onEndReachedThreshold={0}
        onEndReached={fetchItems}
        data={displayItems}
        renderItem={(i) => <ShowItem item={i}/>} />
    
};

export default HomeScreen;

问题在于它会标记一个错误，指出The 'fetchItems' function makes the dependencies of useEffect Hook change on every render.。它建议To fix this, wrap the definition of 'fetchItems' in its own useCallback() Hook.。

所以我把它包在一个useCallback()钩子里：

  const fetchItems = React.useCallback(async () => {
    setIsLoading(true);
    const response = await client(next, 'GET'); // Just calls axios
    setDisplayItems((items) => items.concat(response.data));
    setNext(response.next);
    setIsLoading(false);
  }, [next]);

除非我添加，否则它根本无法运行fetchItems()，但此时它会无限地重新渲染。

我在网上找不到任何可行的方法。令人恼火的是，我记得几年前为另一个项目实施过这个，但我不记得它特别复杂！任何帮助都感激不尽。

react-native
Martin Hope
Ben
Asked: 2024-09-20 17:19:48 +0800 CST
  • 6

我目前正在努力理解如何ENV var根据上下文正确定义。

这是我的示例 eas.json

    {
      "build": {
        "development": {
          "developmentClient": true,
          "distribution": "internal",
          "channel": "development",
          "env": {
            "EXPO_PUBLIC_API_URL": "http://localhost:3000"
          }
        },
        "preview": {
          "distribution": "internal",
          "channel": "staging",
          "env": {
            "EXPO_PUBLIC_API_URL": "https://staging.domain"
          }
        },
        "production": {
          "channel": "main",
          "env": {
            "EXPO_PUBLIC_API_URL": "https://prod.domain"
          }
        }
      }
    }

我还有一个.env.local引用它（我假设，eas.json 不会被笔记本电脑开发人员选中）：

    #DO NOT COMMIT THIS
    SENTRY_AUTH_TOKEN=xxxx
    EXPO_PUBLIC_API_URL=http://localhost:3000

运行更新时

eas 更新--分支暂存--消息“feat（入职）：导航”

无论如何，env.local 都会接管。应该修复什么才能使其正常工作？我想要eas.json preview.env.EXPO_PUBLIC_API_URL被接走

react-native
Martin Hope
Pallavi Saxena
Asked: 2024-09-18 14:41:22 +0800 CST
  • 5

我是 React Native 的新手。在开发教程应用程序时，我无法让 FlatList 显示我的数据项。因此，我创建了一个屏幕，它将从 FlatList 和 View-Map 组合中的对象数组（此处使用的扑克牌）中呈现数据项。现在列表在 View-Map 中完美呈现，但在 FlatList 中完全呈现。也没有出现任何错误或警告。有人能指出这里可能是什么错误吗？我已经努力让它工作了几天了。

import { View, Text, FlatList, Button, SafeAreaView } from "react-native";
import { React, useState } from "react";
import {
  hearts,
  spades,
  clubs,
  diamonds,
  suites,
} from "../../assets/data/cards";

const FlatListVsMap = () => {
  const [cards, setCards] = useState(hearts);
  //console.log("Cards Initially: " + cards);
  const flatlist = false;
  return (
    <SafeAreaView>
     //Option 1: Using a Flatlist when 'flatlist' true
      {flatlist && cards && (
        <FlatList
          data={cards}
          extraData={cards}
          keyExtractor={(card) => card.id}
          renderItem={(card) => {
            <View className="h-10">
              <Text key="index">{`Card: ${card.name}, Id: ${card.id}`}</Text>
            </View>;
          }}
          ListHeaderComponent={
            <View className="flex-row justify-between px-2 mt-5 border">
              <Button title={"Hearts"} />
              <Button title={"Spades"} />
              <Button title={"Clubs"} />
              <Button title={"Diamonds"} />
            </View>
          }
        />
      )}
      //Option 2: Using a View-Map when 'flatlist' false
      {!flatlist && cards && (
        <View>
          <View className="flex-row justify-between px-2 mt-5 border">
            <Button title={"Hearts"} />
            <Button title={"Spades"} />
            <Button title={"Clubs"} />
            <Button title={"Diamonds"} />
          </View>
          <View className="mt-5 bg-slate-400">
            {cards.map((card, index) => (
              <View className="h-10" key={index}>
                <Text>{`Card: ${card.name}, Id: ${card.id}`}</Text>
              </View>
            ))}
          </View>
        </View>
      )}
    </SafeAreaView>
  );
};

export default FlatListVsMap;
react-native
Martin Hope
Amit Yadav
Asked: 2024-09-10 20:55:02 +0800 CST
  • 3

我无法通过这个警告摆脱它

警告：列表中的每个子项都应该有一个唯一的“关键”道具。

完整代码如下：

const App = () => {

  const userList = [
    {
      key: 1,
      name: "Amit"
    },
    {
      key: 2,
      name: "Ajit"
    },
    {
      key: 3,
      name: "Avinash"
    },
  ];

  return (
    <View>
      <Text style={{ textAlign: 'center' }}>Hello List</Text>
      <ScrollView>
        {
          userList.map((item) => <Text style={styles.container}>{item.name}</Text>)
        }
      </ScrollView>
    </View>
  );
};
react-native
Martin Hope
Tony
Asked: 2024-09-02 10:41:54 +0800 CST
  • 5

我的应用有浅色模式和深色模式。我想根据用户的应用处于浅色模式还是深色模式来更改文本的颜色。浅色模式有两种单独的样式，如下所示：

            <Text style={[styles.chromatic, styles.noteTxt]}>{f + ''}</Text>

当将暗模式应用到我的代码时，我是这样写的：

            <Text style={theme === true ? [styles.chromatic, styles.darkNoteTxt] : [styles.chromatic, styles.noteTxt]}>{f + ''}</Text>

没有错误，但在明暗之间来回切换时颜色没有变化。有人能告诉我为什么这在每种情况下都不起作用吗？我猜是语法问题。任何帮助都将不胜感激。

react-native