我看过许多文档和示例，但我似乎仍然不太理解如何在React Native中使用带有TypeScript的功能组件的forwardRef。下面是一个示例，其中我创建了一个带有自定义函数的MyCustomComponent，我尝试通过创建ref从父级调用该函数。但是，由于ref的定义不正确且为null，我显然收到了一条错误消息，告诉我该函数不存在。请帮助我理解如何在React Native中正确使用forwardRef。提前感谢！
interface MyCustomComponentProps {
title: string
}
const MyCustomComponent: React
浏览 2提问于2020-10-23得票数 12
回答已采纳
我使用VSCode集成开发环境开发React Native应用程序。我发现集成开发环境提供了来自TypeScript的类型信息，但我不能在中直接使用它。
例如
render = () => (
<WebView
onNavigationStateChange={this.onNavigationStateChange}
/>
)
onNavigationStateChange = (navState: NavState) => {
//...
};
类型NavState可以在VSCode提供的index.d.ts中找到，但不能在flow.js中使用
浏览 2提问于2017-05-31得票数 0
我正在创建一个自定义组件，脚本是使用React的钩子用TypeScript编写的
我的组件将使用我的一些类型记录类型，并将其与TextInput类型混合(这样我就可以访问TextInput支持)
这是我的自定义组件示例代码
import { Animated, Platform, TextInput, TextInputProps, View } from 'react-native'
type PropsType = TextInputProps & { //Or should I using TextInput instead of TextInputProps?
浏览 2提问于2020-09-12得票数 1
回答已采纳
1回答
我得到了一个ScrollView，它首先作为JavaScript工作，然后作为TypeScript工作；这个ScrollView使用ref属性捕获ScrollView的引用，然后调用它的函数之一scrollToEnd()。但是我最近加强了我的衬垫，我需要找出正确的方法来输入这个引用属性实例。
我一开始是这样的：
import React from "react";
import {ScrollView, StyleProp, ViewStyle} from "react-native";
const standardStyle = {flex:1, backg
浏览 0提问于2020-10-20得票数 2
回答已采纳
我正在使用的反应-本机打字本为我的应用程序。我在反应方面真的很新-土生土长。很多语法对我来说都是新的。对于样式设计，我正在使用。我已经创建了全局按钮组件。所以，我可以在不同的组件中使用它。我想要创建按钮的条件大小和颜色。因此，我可以操纵来自父组件的大小和颜色。我可以做两个有条件的道具。但我不知道如何应对多种情况--本土化的。
这是我的按钮组件
import React from 'react';
import { Text, TouchableHighlight } from 'react-native';
import styled, { css } from
浏览 5提问于2020-07-13得票数 1
我刚接触JavaScript/TypeScript和React Native --尤其是钩子。但是我已经有了这个功能组件，并且我正在尝试弄清楚如何在组件中使用ref。我不确定我在这里是否正确使用了ref (我想我可能需要把它放在一个不同的上下文中，但这不是我目前主要关心的问题)。我想弄明白的是如何在React Native函数组件中使用refs/hooks。 这是我现在得到的： export default function BasicView(
props: BasicViewProps
): JSX.Element {
const basicRef = React.createR
浏览 44提问于2021-10-06得票数 0
回答已采纳
我使用的是我的应用程序的反应-本机类型记录。我的样式-组件版本是"styled-components": "^5.3.0"。我已经创建了自定义ThemeProvider并将其包装到我的根应用程序中。我不得不切换我的应用程序的黑暗主题。我的ThemeProvider工作得很好。我能做DarkTheme和LightTheme。但是当我使用这个命令yarn tsc测试我的应用程序时，类型记录。我收到打字错误：error TS2339: Property 'backgroundColor' does not exist on type 'Defa
浏览 0提问于2021-08-25得票数 1
回答已采纳
我是React-native的初学者，我想在我的应用程序上显示一个视频。我现在使用的是react-native-video。
import React from 'react';
import { StyleSheet, Text, View, requireNativeComponent } from 'react-native';
import Video from 'react-native-video';
export default function App() {
return (
<View style={sty
浏览 1提问于2020-02-12得票数 1
我对Typescript和React还是个新手。我一直在尝试实现react-rewards npm库，除了一个问题之外，我已经解决了所有的问题。 type Props = {}
class Surprisebutton extends Component<Props>{
reward: any;
render() {
return (
<Reward
ref={(ref) => { this.reward = ref }}
type='memphis&
浏览 20提问于2019-05-17得票数 2
1回答
我想在导航抽屉中使用上下文API，而我被困在了如何做到这一点上？
我有两个屏幕显示屏幕和上传屏幕，在上传屏幕我收集数据，并将它们发送到useState挂钩，然后把他们发送到显示屏幕。在显示屏幕上，我把这个数据添加到数组中，现在的问题是当我回去上传屏幕再发送更多的数据时，显示屏幕数组得到返回到它的初始状态，即为空。现在，我需要创建一个上下文api，以便在其中添加数据。我怎么能这么做。下面是我的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow s
浏览 4提问于2021-12-17得票数 2
4回答
如果我在我的项目中添加了@type/styled组件，那么构建输出中就会出现一堆错误：
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property de
浏览 0提问于2019-02-15得票数 30
回答已采纳
我正在尝试在我的世博/反应本机组件类中实现Google身份验证，但是博览给出的例子是功能组件。
他们将此代码用于Google身份验证：
import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { Button } from 'react-native';
WebBrowser.maybeCo
浏览 5提问于2021-10-09得票数 2
回答已采纳
我刚刚开始使用原生的react，我做了一个多屏幕的安卓应用程序(通过使用react-native-navigation。我的屏幕是屏幕导航示例中所示的功能，但现在我想使用第二个屏幕中的摄像头。 了解一下我的代码是什么样子的： import React, {Component} from 'react';
import { Platform, StyleSheet, Text, View, ScrollView, TextInput, Button, Image } from 'react-native';
import {NavigationContainer
浏览 18提问于2020-04-10得票数 0
我在一个父转换视图中有一个转换引用，我想要传入一个子级： const transition = (
<Transition.Together>
<Transition.In type="fade" durationMs={300} />
<Transition.Change />
<Transition.Out type="fade" durationMs={300} />
</Transition.Together>
);
const FiltersModal: FC
浏览 19提问于2020-09-23得票数 3
1回答
我试图使用反应-本机相机，我想发送令牌从第一页到相机页面。我怎样才能在相机页面上得到一个记号呢？我不知道如何解决这个问题，我试图将相机页面更改为基于功能的组件，但我得到了更多的错误:)所以如果你们帮助我，我会很高兴的
第一页是基于功能的组件。
import React from 'react';
import {View, Text, TouchableOpacity, ActivityIndicator} from 'react-native';
const first = () => {
const token = '12345678&#
浏览 4提问于2021-04-08得票数 0
回答已采纳
我有一个<TextInput>，并通过这样做给它一个ref属性：
ref={node => this.usernameInput = node;}
然后，当用户按下一个试图获取<TouchableInput>值的this.usernameInput时，我就有了一个方法。this.usernameInput在我的onPress方法中不是空的，但是我找不到获得它的值的方法！当我这么做时：
console.log(this.usernameInput.value);
它记录undefined。如果我设置了一个断点，并检查this.usernameInput，我可以看到它
浏览 4提问于2016-10-29得票数 1
回答已采纳
在使用样式组件和VSCode时，我遇到了一个奇怪的问题。下面基本上是我从任何来自样式组件的组件中得到的，它们都返回任何。
我之前让它工作了，但是我不知道什么时候，我也看不到所有组件返回任何错误的设置中有什么问题。我试图移回tslint配置，删除/注释掉eslintrc文件中的所有规则，但也无法使其工作。
令人惊讶的是，我尝试了我在我的项目中使用的，其中的类型可以与原始设置一起工作。
我尝试使用相同版本的样式化组件包，但仍然不能正常工作。任何关于这个问题的帮助或方向都将非常受欢迎！
.eslintrc.js
module.exports = {
env: {
b
浏览 2提问于2020-08-08得票数 2
从我的观察来看，Alert对话框似乎建立在React之上。所以每次调用它时都会弹出，而不是在render函数中。
问题是它不是异步任务，所以Alert之后的代码将继续执行，而不管回调函数如何。
下面的代码演示了Alert对话框不断弹出的情况，因为它一遍又一遍读取相同的条形码。
(它是用TypeScript写的。相信我的话，这是一个有效的片段。)
import * as React from "react";
import Camera from "react-native-camera";
import { Alert } from "react-
浏览 0提问于2018-02-15得票数 22
回答已采纳
如果用户选择了亮主题，并切换到暗主题，则所有场景都将立即渲染为使用暗主题。
如果有帮助的话，我正在使用react-native-router-flux。
提前谢谢你，
浏览 0提问于2016-08-22得票数 3
使用"react"："15.3.2"，"react-native"："0.35.0"，"react-native-fbsdk"："^0.3.0“我使用的安卓虚拟设备是=> Android7.0，接口级别: 24
我遵循了自述文件设置
我想使用Analytics for Apps。
在iOS上，它在应用程序发布和AppEventsLogger上都运行得很好
在Android上，它在App Launches上运行良好，我可以在facebook分析网站上获得数据
但是关于AppEventsLogger.lo
浏览 0提问于2016-10-25得票数 0
我试图理解在useSelector中使用_bootstrapAsync的区别在于它以这种方式失败了
import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'
import { ActivityIndicator, StatusBar, View, Text } from "react-native";
export default function authLoading({ navigation }) {
浏览 0提问于2019-12-09得票数 0
我使用基于本机的库来创建我的应用程序用户界面，我制作了基于本机的抽屉，它可以正常工作，但是当我在组件之间移动时，它会出现错误，例如，当我从主屏幕移动到详细信息屏幕并返回到主屏幕时，它会从我的详细信息屏幕中得到类似以下null is not an object (evaluating '_this.drawer._root')的错误 Home.js文件： import React, { useEffect, useState } from 'react';
import * as Font from 'expo-font';
import { V
浏览 17提问于2021-05-03得票数 0
1回答
如何在类组件中使用forwardRef与react-redux的连接函数
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <ChildCompon
浏览 3提问于2020-10-21得票数 0
我正在尝试在React Native中添加一个对功能组件的引用，以便在FlatList组件上使用scrollToEnd。
我想使用recompose来解决这个问题，作为他们的文档状态，toClass()应该能够处理这个问题。然而，没有给出任何例子。
目前，这是我失败的实现。有人能告诉我我哪里做错了吗？
我将不胜感激！
import React from 'react';
import PropTypes from 'prop-types';
import { FlatList, View, Text } from 'react-native';
浏览 0提问于2017-10-05得票数 11
我刚刚被一个运行时异常咬了一口，因为我把React引用传递给了错误的组件。
我想知道TypeScript是否/如何在这里拯救我的培根？
精简测试用例：
import * as React from 'react';
class Modal extends React.Component<{}> {
close = () => {};
}
declare const modal: Modal;
modal.close();
const modalRef = React.createRef<Modal>();
// Let's
浏览 0提问于2019-05-30得票数 1
3回答
我是TypeScript新手。我有一个下面的组件使用styled-components，我想转换为TypeScript。
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
const propTypes = {
name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline
}
con
浏览 1提问于2019-03-29得票数 12
我正在用Hooks开发一个React Native应用程序。(没有类)。当我们使用类时，我们可以创建一个对子组件的引用，如下所示。 <Child ref={component => this.childComponent = component} /> 但是，当我们使用Hooks时如何做到这一点呢？ 我想要这样的东西。 export default function Child() {
const foo = () => {
//do something
}
return(
//something
)
}
export defau
浏览 20提问于2020-04-27得票数 4
回答已采纳
在我的React Native应用程序中，我使用库react-native-card-flip。
在类组件中，我按如下方式使用它：
<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.jiggle({ count: 2, duration: 100, progress: 0.05 })} ><Text>AB</Text
浏览 0提问于2021-03-30得票数 1
我买了一个关于Udemy的反应本土化课程，教React的人使用了{...this.props}。但这对我没用。这是错误消息。
TypeError:未定义不是对象(计算'_this.props')
我该怎么办？
LoginForm.js
import React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import Input from '../components/Input';
const
浏览 6提问于2020-03-04得票数 1
回答已采纳
1回答
我想从同级组件调用组件函数，我决定使用父组件和参考信息来实现它。以下是我的父组件SMS-Registration.js
import React, {Component} from 'react';
import PhoneNumber from './Sms/PhoneNumber';
import VerificationCode from './Sms/VerificationCode';
class SmsRegistration extends Component {
state = {
confirm: false,
浏览 1提问于2020-06-09得票数 0
我正在尝试使用react本机ui-kitten来响应本机组件，并且它的工作性能非常好。最近，我想在我的应用程序中添加主题，并使用它们的“RkTheme”和“RkType”，但是没有一个在起作用。
使用RkTheme.setTheme(themeJson)设置主题应更改已在屏幕上呈现的元素的样式。
使用RkTheme.setTheme(themeJson)实际设置主题并不改变已经呈现的组件集的样式。
下面是json包的一部分
"dependencies": {
"prop-types": "^15.6.1",
"react":
浏览 0提问于2018-10-14得票数 1
回答已采纳
2回答
我想把它导入到我的react原生项目的Appjs视图中。
我尝试了许多方法，但都不起作用。我的意思是，我想在我的视图中渲染它。如何在我的Appjs中导入和显示此文件。有没有人能帮帮我，这对我很重要。
下面是我的代码：
import ForwardRef from '../../constants/UI_login/Home_Landing_Page/BackgroundComponent'
import React from "react";
import Svg, { Defs, LinearGradient, Stop, Rect } from "r
浏览 0提问于2019-02-03得票数 2
1回答
我已经在react-native中成功地设置了样式组件，但我现在使用的是react-native-web，在这个非常简单的示例中，我无法让样式组件在web上工作： import * as React from 'react';
import styled from 'styled-components';
export default class View extends React.PureComponent {
public render() {
return (
<Container>
<h1&
浏览 21提问于2019-01-26得票数 0
回答已采纳
当使用带有ref="nav“的子组件挂载组件(使用jsdom)时，我希望this.refs.nav是componentDidMount中的子导航器。当我在this.refs (console.log，this.refs)中使用componentDidMount时，会得到空白的componentDidMount对象。
下面的组件在ios模拟器中呈现并工作得很好，但是使用酶的挂载，参考文献是空白的。我还注意到，如果根元素上有ref，则在componentDidMount中定义了特定的引用。
我正在使用：
"react": "^15.4.1",
"re
浏览 1提问于2017-01-06得票数 1
我正在尝试扩展库的Button组件。
使用扩展组件的类：
import { DefaultButton } from "../../support/ui/DefaultButton";
...
render() {
const loginProps = {
title: "login",
style: {backgroundColor: DefaultTheme.blueColor},
containerStyle: {backgroundColor: DefaultTheme.
浏览 7提问于2017-01-09得票数 1
如何从React Native (v0.5.0)中的组件获取DOM节点？根据下面的代码片段，"this.refs.abc“没有"getDOMNode( )”方法。此外，"findDOMNode()“在React模块中不可用。(最终，我尝试找出组件的DOM元素的维度)。
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
浏览 0提问于2015-06-16得票数 1
我试图使用反应-本机-生-底片作为一个可重用的组件。我创建了一个父Componet，问题是当我试图给出得到这个错误的值时。
TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')
父组件
import React from 'react';
import RBSheet from 'react-native-raw-bottom-sheet';
const CustomActionSheet = (props) => {
const {
浏览 2提问于2021-05-01得票数 1
回答已采纳
我在View上使用了一个ref。Typescript给我一个错误："Object is 'null'“。在视图上使用的ref的正确类型是什么？具体来说，我使用的是Animated.View，但我不认为这有什么不同。
这里的其他答案是针对ReactJS(web)和使用const overlayEl = useRef<HTMLDivElement>(null);的，但我正在寻找针对React Native的答案。
const Component = () => {
const ref = React.useRef(null);
React.use
浏览 5提问于2021-12-01得票数 0
2回答
我在我的应用程序中使用了react本机mpaboxgl。
import MapboxGL from "@mapbox/react-native-mapbox-gl";
<MapboxGL.MapView
logoEnabled={false}
attributionEnabled={false}
ref={(e) => { this.oMap = e }}
zoomLevel={6}
centerCoordinate={[54.0, 24.0]}>
<MapboxGL.MapView>
如何在另一个组件中使用oMap？因
浏览 2提问于2019-04-09得票数 2
回答已采纳
2回答
任何人都知道如何从组件SetIsOpen中更改BottomSheetBtn的真正值？我想我试过了我知道的每一件事，但结果我不可能
import { StyleSheet, Text, View } from 'react-native';
import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';
import { TextInput } from 'react-native-gesture-handler';
import BottomSheetBtn from '
浏览 1提问于2022-08-05得票数 0
tslint-microsoft-contrib 版本：^5.2.1
TSLint版本：^5.11.0
TypeScript版本：^3.1.6
通过：VS代码运行TSLint
正在链接的TypeScript代码
import * as React from 'react'
import { View } from 'react-native'
interface Props {
name: string
color: string
price: string
}
const Card = ({ name, color, p
浏览 1提问于2018-11-30得票数 1
回答已采纳
this.props.navigation.navigate在导航屏幕过渡时传递一个值。
在从exerciseType.js向exerciseList.js传递一个值时，我得到一个错误: Cannot read property 'props‘of undefined?.
--exerciseType.js--
import React from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import { createAppContainer } from
浏览 0提问于2021-07-14得票数 0
我正在尝试将react原生的、react导航-抽屉和类型-结合起来，并出现以下错误：
TypeError: null不是一个对象(计算'_ReanimatedModule.default.configureProps')
在四处搜索时，我觉得问题可能是没有指定默认路径。说应该有一个initialRoute：
有几个选项传递给底层路由器以修改导航逻辑：
initialRouteName -最初路线的routeName。
但是不包括这样的字段。这只是打字本绑定的问题吗？
"dependencies": {
"@types/jest
浏览 7提问于2019-09-25得票数 0
1回答
在我的react应用程序中，使用react-native-paper和typescript，所有的纸组件都抛出类型错误；
类型'The props used‘缺少类型'Pick<Component Related Props &{ style?：StyleProp；主题:主题；}& RefAttributes<{}>、"ref“{onLayout’Theme‘Theme. 32多个.”key“>：accessibilityComponentType，accessibilityTraits中的属性
例如，如果我使用react本地纸
浏览 5提问于2021-02-10得票数 2
我是react & react-native的初学者。我正在使用react 16，react-thunk，react-redux。
我正在尝试从firestore中获取我已经创建的类别。首先，我使用connect()调用action，然后，我使用thunk输入action，也从firestore获取数据。最后，我在reducer中返回了新状态。当然，我不知道redux过程，所以请给我一些提示。
这是我的代码。谢谢。
CategoryImageList.js (组件)
...
class CategoryImageList extends Component {
component
浏览 40提问于2018-06-03得票数 0
回答已采纳
使用带有for的TypeScript，我们不再需要扩展React.Props，以便编译器知道所有React组件道具都可以有子组件：
interface MyProps { }
class MyComponent extends React.Component<MyProps, {}> {
public render(): JSX.Element {
return <div>{this.props.children}</div>;
}
}
但是，对于无状态功能组件，情况似乎并非如此：
const MyStatelessComponent =
浏览 2提问于2016-11-22得票数 139
回答已采纳
我有一个TypeScript函数，它返回一个ReactiveNativeView。
import React from "react";
import JSX, {View} from "react-native";
class DummyClass {
static getView() {
return (
<View style={{flex: 1}}/>
);
}
}
export default DummyClass;
我用这样的方式调用这个函数：
import JS
浏览 9提问于2020-10-21得票数 1
回答已采纳
我想将ref添加到样式化组件div。
我的代码如下：
const DragAndDrop: React.FC<any> = props => {
const div_ref= React.createRef();
return (
<Zone ref={div_ref}/>
);
}
但这给了我一个错误
类型RefObject不可赋值给类型{instance: htmlDivElement || null} refObject空|| => || null ||未定义
有人能帮我解决这个问题吗。谢谢。
浏览 21提问于2020-05-29得票数 0
回答已采纳
1回答
我正在尝试访问React Native中的当前视频帧。我可以用'react-webcam‘做同样的事情，同时用下面的代码使用React.js。
import React from "react";
import Webcam from "react-webcam";
function MyFunc () {
const cameraRef = useRef(null);
const processFrame = async() => {
if (cameraRef.current.video){
const img
浏览 4提问于2021-05-23得票数 1
嘿，我有一个问题，我的反应-本地应用。
我有3份文件
App.tsx
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button
} fr
浏览 6提问于2022-02-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
