react-native 相关问题

React Native：无法安装应用程序。无法找到或加载主类 org.gradle.wrapper.GradleWrapperMain

我最近开始了我的 React Native 之旅，在开始编码之前就遇到了障碍。我遵循 Facebook 关于如何为 React Native 项目设置环境的指南，尽管我

react native : npx react-native start ==> 找不到方法 exec()

我使用此视频的配置安装 android studio、node js、JDK 17：https://www.youtube.com/watch?v=G0wrlZvDjrE 但是当我使用 cmd 运行应用程序时：npx react-native start。 我有这个错误

React Native：Android TextInput autoCorrect={false} 不会禁用建议

autoCorrect={false} 假设强制无建议模式，因此输入字段中的文本没有下划线，但它不起作用。 2018 年 8 月 18 日更新：似乎禁用了建议，但 n...

发布正文并返回 401 时，Expo 获取无法解析

这让我难住了。我正在开展以下工作： 常量 testFetch = () => { console.log("testFetch"); fetch(`${baseurl}/${requrl}`, { 方法：“POST”， ...

如何将路由文件移动到 React Native Expo 中的路由文件夹中

我有一个 React 本机博览会应用程序。根据官方文档，几乎 /app 文件夹中的每个文件都应该是一个路由。因此文件 app/settings.tsx 将映射到

无法解决 Expo Snack 中的 Firebase 依赖关系：“无法解决依赖关系 '[email protected]'”

我正在使用 Expo 的 Snack 开发 React Native 应用程序，并且在解决 Firebase 依赖项时遇到问题。这是我到目前为止所做的： 问题： 当我...

卡在 openAuthSessionAsync - 如何在成功登录 Google OAuth 后关闭浏览器？

我目前正在开发一个 React Native 应用程序，其中使用 Google OAuth 进行用户身份验证。我正在利用 Expo AuthSession API 中的 openAuthSessionAsync 方法来处理身份验证...

react-native-ble-plx 移动到 npm 模块内时不会运行

因为我将有多个应用程序使用相同的实现来连接到 BLE 设备，所以我尝试将该代码移动到模块内。然而我遇到了一个奇怪的问题，即

当应用程序需要：SCHEDULE_EXACT_ALARM 和 USE_EXACT_ALARM android 权限

在应用程序清单中我有： ...

博览会错误：编译JS失败：无法识别的字符'@'

我在谷歌上运气搜索后得到了答案，所以我决定在这里分享这个，以便更容易找到解决方案 展会开始后，Android 模拟器显示错误消息 Compiling JS failed: ...

从 Firestore 获取每个用户数据失败

我正在尝试根据用户登录从 firestore 获取每个用户数据，在我使用 React Native 和 firebase 之间。 获取代码 const UserInbox = () => { const auth = getAuth(应用程序) 合作...

找不到“RNPermissionsModule”。不变违规：TurboModuleRegistry.getEnforcing(...)

我正在尝试构建一个在请求许可后打开相机的应用程序。我正在使用“react-native-permissions”，它似乎找不到 RNPermissionsModule。我正在测试...

expo图像选择器android 13无法访问所有相册

似乎Android 13的新版本不再像以前那样通过launchImageLibrary授予对每个文件夹的访问权限。 我可以做什么来访问图库中的所有专辑。 寻求帮助

为什么我无法使用react-native-iap 获得订阅

我在 App Store Connect 上创建了一个订阅 在此输入图像描述 并尝试在我的代码中获取此订阅，如下所示 const { 连接, getSubscriptions } = useIAP() 常量...

在 React Native 中获取视图的大小

是否可以获取某个视图的尺寸（宽度和高度）？例如，我有一个显示进度的视图： 是否可以获取某个视图的尺寸（宽度和高度）？例如，我有一个显示进度的视图： <View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} /> 我需要知道视图的实际宽度才能正确对齐其他视图。这可能吗？ 从 React Native 0.4.2 开始，View 组件有一个 onLayout prop。传入一个接受事件对象的函数。事件的 nativeEvent 包含视图的布局。 <View onLayout={(event) => { const {x, y, width, height} = event.nativeEvent.layout; }} /> 每当调整视图大小时，也会调用 onLayout 处理程序。 主要需要注意的是，onLayout处理程序在组件安装后的一帧内首先被调用，因此您可能需要隐藏 UI，直到计算出布局。 这是唯一对我有用的东西： import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; export default class Comp extends Component { find_dimesions(layout){ const {x, y, width, height} = layout; console.warn(x); console.warn(y); console.warn(width); console.warn(height); } render() { return ( <View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('Comp', () => Comp); 您可以通过Viewprops轻松获取onLayout的大小。 import React from 'react' import { View } from 'react-native' export default function index() { const onLayout=(event)=> { const {x, y, height, width} = event.nativeEvent.layout; } return ( <View onLayout={onLayout}> <OtherComponent /> </View> ) } 每当调整视图大小时，也会调用 onLayout 处理程序。 主要需要注意的是，onLayout处理程序在组件安装后的一帧内首先被调用，因此您可能需要隐藏 UI，直到计算出布局。 基本上，如果您想设置大小并使其更改，则将其设置为布局状态，如下所示： import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'yellow', }, View1: { flex: 2, margin: 10, backgroundColor: 'red', elevation: 1, }, View2: { position: 'absolute', backgroundColor: 'orange', zIndex: 3, elevation: 3, }, View3: { flex: 3, backgroundColor: 'green', elevation: 2, }, Text: { fontSize: 25, margin: 20, color: 'white', }, }); class Example extends Component { constructor(props) { super(props); this.state = { view2LayoutProps: { left: 0, top: 0, width: 50, height: 50, } }; } onLayout(event) { const {x, y, height, width} = event.nativeEvent.layout; const newHeight = this.state.view2LayoutProps.height + 1; const newLayout = { height: newHeight , width: width, left: x, top: y, }; this.setState({ view2LayoutProps: newLayout }); } render() { return ( <View style={styles.container}> <View style={styles.View1}> <Text>{this.state.view2LayoutProps.height}</Text> </View> <View onLayout={(event) => this.onLayout(event)} style={[styles.View2, this.state.view2LayoutProps]} /> <View style={styles.View3} /> </View> ); } } AppRegistry.registerComponent(Example); 您可以通过在另一个组件中使用它来创建更多的修改方式，该组件将另一个视图作为包装器并创建一个 onResponderRelease 回调，该回调可以将触摸事件位置传递到状态中，然后可以将其传递给子级组件作为属性，可以通过放置 {[styles.View2, this.state.view2LayoutProps, this.props.touchEventTopLeft]} 等来覆盖 onLayout 更新状态。 也许你可以使用measure: measureProgressBar() { this.refs.welcome.measure(this.logProgressBarLayout); }, logProgressBarLayout(ox, oy, width, height, px, py) { console.log("ox: " + ox); console.log("oy: " + oy); console.log("width: " + width); console.log("height: " + height); console.log("px: " + px); console.log("py: " + py); } 我创建了这个简单的组件 import React, {Dispatch, SetStateAction} from 'react'; import {View, ViewProps} from 'react-native'; interface GetDimensionsProps { children: React.ReactNode | React.ReactNode[]; onDimensions: Dispatch<SetStateAction<{height: number; width: number}>>; viewProps?: ViewProps; } export const GetDimensions: React.FC<GetDimensionsProps> = ({ children, onDimensions, ...viewProps }: GetDimensionsProps) => { return ( <View onLayout={event => onDimensions({ width: Math.round(event.nativeEvent.layout.width), height: Math.round(event.nativeEvent.layout.height), }) } {...viewProps}> {children} </View> ); }; // ──────────────────────────────────────────────────────────────────────────────── // usage // const [dimensions, setDimensions] = useState<{ // height: number; // width: number; // }>({width: 0, height: 0}); // // <GetDimensions onDimensions={setDimensions}> // {children} // </GetDimensions> 是的，你可以通过 onLayout prop 来实现这一点 const [progress, setProgress] = useState(0.5); // Example progress value const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const progressBarRef = useRef(null); const onLayout = event => { const { width, height } = event.nativeEvent.layout; setDimensions({ width, height }); }; 那么你的观点应该是这样的 <View style={styles.container}> <View ref={progressBarRef} style={[styles.progressBar, { flex: progress }]} onLayout={onLayout} /> <Text>Progress Bar Width: {dimensions.width}</Text> <Text>Progress Bar Height: {dimensions.height}</Text> </View> 还有这样的风格 container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, progressBar: { backgroundColor: 'red', height: 20, alignSelf: 'stretch', }, 您也可以在expo零食中查看完整代码 展会链接 对我来说，将尺寸设置为使用％对我有用 width:'100%' 这是获取设备完整视图尺寸的代码。 var windowSize = Dimensions.get("window"); 像这样使用它： width=windowSize.width,heigth=windowSize.width/0.565 您可以直接使用 Dimensions 模块并计算视图尺寸。 实际上，Dimensions 为您提供了主窗口尺寸。 import { Dimensions } from 'Dimensions'; Dimensions.get('window').height; Dimensions.get('window').width; 希望能帮到你！ 更新：今天使用本机StyleSheet和Flex排列您的视图有助于在广泛的情况下使用优雅的布局解决方案编写干净的代码，而不是计算视图大小... 尽管构建一个响应主窗口大小调整事件的自定义网格组件，可以在简单的小部件组件中产生一个很好的解决方案

如何添加菜单以打开材质底部选项卡内的抽屉

如何在材料底部选项卡中添加菜单以打开抽屉或切换抽屉，其中我单击底部选项卡导航中的菜单 请有人能帮助我 这是我的代码： 函数 TabGroup (){

Amplify v6 uploadData: 在 React Native Expo 中上传文件时出现 [AccessDenied: Access Denied] 错误

我正在使用 Expo 和 AWS Amplify 将我的 React Native 应用程序从版本 5 迁移到版本 6。我在尝试使用 uploadD 将文件上传到 S3 时遇到 AccessDenied: Access Denied 错误...

错误：当字符串不为空时，必须在 React Native 的 <Text> 组件中渲染文本字符串

所以我最近遇到了文本标签中显示的错误，尽管我找不到它显示的原因。我已记录该值不为空并且在按下按钮之前该值已存在......

React-Native run-android 在特定设备上

是否可以仅对一台特定设备使用 run-android 命令？ 例如，如果我连接了三台设备（或模拟器）并且我只想在其中一台上使用 run-android？ 也许

如何在 React Native 的推送通知中显示接受拒绝按钮

如何在本机反应推送通知中显示接受拒绝按钮 我想在本机反应中接受通知中的拒绝按钮。因此，如果通知涉及如果他们想接受他们可以