react-native 相关问题

React Native允许您使用React构建本机移动应用程序。 React Native的重点是在您关注的所有平台上实现开发人员效率 - 学习一次,随处写作。

React Native 错误:元素类型无效:需要字符串或类/函数,但得到:未定义。但在哪里呢?

我是第一个在代码中添加覆盖时出现此错误的人 const HomeScreen = ({ 导航 }) => { const [modal, setModal] = useState(true); 返回 ( ...

回答 2 投票 0

使用手势处理程序在我的反应本机代码中出现错误

我正在 js 文件中使用 React Native Gesture Handler,当我运行代码时,我收到此错误 错误 [react-native-gesture-handler] 手势中的一些回调是工作集,一些是...

回答 1 投票 0

创建付款失败 Stripe ReactNative 中的卡详细信息不完整

我正在使用 @stripe/stripe-react-native": "^0.37.2" 进行付款。我想通过在表单中输入卡详细信息并在 createPaymentMethod 中传递参数来手动付款,我...

回答 1 投票 0

react 本机版本检查包使应用程序崩溃

我已通过yarn安装了react-native-version-check到我的项目中,当我使用某些功能时,应用程序崩溃向我发送以下消息: 警告[类型错误:网络请求失败] 这仅发生在...

回答 4 投票 0

iOS 使用时和始终的位置

我正在开发一个导航应用程序,其中位置位于最前沿。根据我获得的信息,如果用户允许“NSLocationAlwaysAndWhenInUseUsageDescriptio...

回答 1 投票 0

Google 地图未在 React Native Expo 项目中显示

这是我正在开发的一个 React Native (Expo) 项目,我正在尝试在这个组件中渲染 Google 地图,但尽管一切都正确无误,但它没有显示。 这是我的...

回答 1 投票 0

如何在 React-Native (JavaScript) 中显示文本更多/更少

我正在开发反应本机应用程序。其中,我们正在显示一些关于文本的描述,它可能是行数。 所以,如果数据超过 3 行,如果展开的话我必须显示更多和更少...

回答 9 投票 0

Firebase 批量写入失败并显示 [错误:[firestore/无效参数]]

当我尝试以 450 的间隔批量插入记录时(我选择此选项是为了确保低于 500 个 Firestore 限制),我收到无效参数的错误。下面是我正在使用的确切代码。 我是

回答 1 投票 0


如何防止 React Native SafeAreaView 中的底部区域与内容重叠?

我正在我的 React Native 应用程序上实现 。我的大部分屏幕都在 ScrollView 中。当我添加 时,它会遮挡内容。虽然我想要这个底部区域...

回答 7 投票 0

react-devtools:超时无法检查元素

当尝试检查任何模式或覆盖元素时,我遇到了反应开发工具的问题。检查元素时显示超时。

回答 6 投票 0

在 React Native 中你用什么来使用 google pay 按钮?

首先我按照指南手动设计了一个按钮,但他们仍然说这不符合指南。那么有什么我可以使用的包吗? 我尝试过 https://github.com/baugarten/react-

回答 1 投票 0

React 中无法移除输入框边框

我一直在尝试删除点击输入框时出现的黑框,但它并没有消失 const renderSearch = () => { 返回 ( 我一直在尝试删除点击输入框时出现的黑框,但它并没有消失 const renderSearch = () => { return ( <View style={styles.searchSection}> <FaSearch style={styles.searchIcon} /> <TextInput value={searchValue} onChangeText={(text) => onSearch(text)} placeholder="Search for a restaurant" style={styles.input} /> </View> ) } input: { flex: 1, height: '100%', width: '100%', color: '#424242', backgroundColor: 'transparent', borderWidth: 0, // Eliminar el borde padding: 0, // Eliminar el relleno fontSize: 16 // Ajustar el tamaño de la fuente según sea necesario }, 移除黑匣子 您指的是outline吗?当您专注于输入时出现的边框。 如果是这样,请尝试在您的输入中添加此 css: outline: none;

回答 1 投票 0

在博览会中构建预览时遇到问题(React Native)

我的应用程序在模拟器上使用时运行得很好,但在尝试在博览会中构建它时抛出此错误 在 /home/expo/workingdir/build/android 中运行 'gradlew :app:assembleRelease' 欢迎...

回答 1 投票 0

将 TinyMCE WYSIWYG HTML 编辑器集成到 React Native 应用程序

我正在尝试将 TinyMCE WYSIWYG HTML 编辑器合并到 React Native WebView 组件中。有办法完成这个任务吗?

回答 2 投票 0

react-native-fs 无法在 android 上获取 dcim/camera 文件

我尝试使用react-native-fs从我的android库中获取文件(在/storage/emulated/0/dcim/camera文件夹中)。 我已经设置了这些 android 权限: 我尝试使用react-native-fs从我的android库中获取文件(在/storage/emulated/0/dcim/camera文件夹中)。 我已经设置了这些 android 权限: <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 我尝试使用以下代码访问该文件: async componentDidMount() { const path = RNFS.ExternalStorageDirectoryPath + '/dcim/camera'; console.log('Document Path : ', path); const dir = await RNFS.readDir(path); console.log('DIR : ', dir); } 不幸的是,我没有成功检索文件。这是日志: LOG Document Path : /storage/emulated/0/dcim/camera LOG DIR : [] 如果我尝试列出 /dcim 文件,效果很好: LOG Document Path : /storage/emulated/0/dcim LOG DIR : [{"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2022-06-20T14:46:24.000Z, "name": "Camera", "path": "/storage/emulated/0/dcim/Camera", "size": 53248}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2021-05-03T00:04:15.000Z, "name": ".thumbnails", "path": "/storage/emulated/0/dcim/.thumbnails", "size": 24576}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2020-01-24T01:45:31.000Z, "name": ".tmfs", "path": "/storage/emulated/0/dcim/.tmfs", "size": 3488}, {"ctime": null, "isDirectory": [Function isDirectory], "isFile": [Function isFile], "mtime": 2022-06-21T12:55:14.000Z, "name": "Screenshots", "path": "/storage/emulated/0/dcim/Screenshots", "size": 118784} 您知道为什么我无法检索相机文件吗? 非常感谢=) 你解决了吗?我也有同样的问题。原来是目录出错了。我正在尝试找到合适的 api 来做到这一点

回答 1 投票 0

在 React Native 中创建带有框阴影的 UI

我正在尝试在React Native中创建一个UI,该UI包含一个带有外部阴影的框。使用图像我已经做到了,但是有什么正确的方法可以做到这一点吗?

回答 6 投票 0

react-native-svg 中的 LinearGradient 不起作用

我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码: 我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码: <Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}> <Defs> <ClipPath id="a"> <Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/> </ClipPath> <LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox"> <Stop offset="0" stopColor="rgb(76,209,149)" /> <Stop offset="1" stopColor="rgb(170,221,100)" /> </LinearGradient> </Defs> <G class="b" transform="translate(0 -160)"> <Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)" fill='url(#b)' /> </G> </Svg> 我得到的输出是: 我认为@enxaneta是对的,clip-path似乎不存在于react-native-svg请参阅文档,您可以在此处的文档中找到react-native-svg #LinearGradient 我认为你应该这样引用它: <Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/> 其中 fill 应引用您的渐变 id,即 fill=url(#b) 我使用<Path>实现了以下结果 注意:我通过使用两个相互重叠的形状来实现这一点: 使用 react-native-linear-gradient 实现背景渐变的组件 以及来自 react-native-linear-gradient 的 LinearGradient 请参考以下代码。 上面例子的代码 import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'; import Gradient from 'react-native-linear-gradient' const { width, height } = Dimensions.get('window') <Gradient style={{height: height * .25,}} colors={ ['#FFD080', 'red'] } start={{ x: 0, y: 0}} end={{ x:1, y: 1}} locations={[0.18, 1, 1]}> <Svg height={height * .44} width={width} viewBox="0 0 1440 320" style={{ position: 'relative', top: height * .069 }} > <Defs> <LinearGradient id="path" x1="0" y1="0" x2="1" y2="1"> <Stop offset="0" stopColor="#FFD080" stopOpacity="1" /> <Stop offset="1" stopColor="red" stopOpacity="1" /> </LinearGradient> </Defs> <Path fill="url(#path)" d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/> </Svg> </Gradient> 我找到了一个解决方案,我不使用具有渐变的 svgs,而是将 SVG 转换为 Lottie 文件。效果很好,作为额外的优势,我们可以将 SVG 转换为简单的动画:) 效果很好: import React from "react"; import { View, Text } from "react-native"; import { Polygon, Svg, LinearGradient, Stop, Defs, G, Use,} from "react-native-svg"; const Triangle = () => { return ( <Svg viewBox="0 0 386 386"> <Defs> <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0"> <Stop offset="0" stopColor="#000" stopOpacity="0.2" /> <Stop offset="1" stopColor="#71D4EB" stopOpacity="0.1" /> </LinearGradient> <G id="polygon"> <Polygon points={"193,193 0,386 0,0"} fill="url(#grad)" strokeWidth={0} /> </G> </Defs> <Use href="#polygon" x="0" y="0" /> <Use href="#polygon" x="0" y="0" rotation="180" origin="193, 193" /> <Use href="#polygon" x="0" y="0" rotation="90" origin="193, 193" /> <Use href="#polygon" x="0" y="0" rotation="270" origin="193, 193" /> </Svg> ); }; export default Triangle;

回答 3 投票 0

Flipper 版本 0.165.0 插件出现问题

我在将Flipper升级到最新版本时遇到问题,无法使用Flipper的默认插件。有什么想法吗,因为我有研究,但没有看到有人遇到同样的问题。 我用的是M1 pro 带芯片...

回答 2 投票 0

如何仅修复两个 React Native 平面列表中的一个标头

我正在使用 React Native 并使用 FlatList 组件。 我们试图解决的问题是: FlatList中有一个表头,表头由两个元素界定。 (顶部区域、类别选择B...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.