React Native:如何从另一个组件调用函数
React Native是一种用于构建跨平台移动应用的开发框架。它允许开发者使用JavaScript编写代码，并将其转换为原生组件，从而实现在多个平台上运行的应用程序。
要从另一个组件调用函数，可以按照以下步骤进行操作：
- 在要调用函数的组件中，首先确保该函数已经被定义。可以将函数定义在组件的顶层或者使用ES6的class语法定义一个方法。
- 在要调用函数的组件中，使用
import语句引入包含该函数的组件。例如，如果要从组件A中调用组件B中的函数，可以使用以下语句导入组件B： - 在要调用函数的组件中，使用
import语句引入包含该函数的组件。例如，如果要从组件A中调用组件B中的函数，可以使用以下语句导入组件B： - 在需要调用函数的地方，使用组件B的实例调用函数。可以通过在组件B的标签中添加
ref属性来获取组件B的实例。例如： - 在需要调用函数的地方，使用组件B的实例调用函数。可以通过在组件B的标签中添加
ref属性来获取组件B的实例。例如： - 然后，可以使用
this.componentB来访问组件B的实例，并调用其中的函数。例如： - 然后，可以使用
this.componentB来访问组件B的实例，并调用其中的函数。例如：
需要注意的是，组件B必须已经被渲染到屏幕上，否则ref属性将无法获取到组件B的实例。
React Native推荐的腾讯云相关产品和产品介绍链接地址如下：
- 云开发（CloudBase）：腾讯云提供的一站式后端云服务，包括云函数、云数据库、云存储等，可用于支持React Native应用的后端开发。详情请参考腾讯云云开发。
- 移动推送（TPNS）：腾讯云提供的移动推送服务，可用于在React Native应用中实现消息推送功能。详情请参考腾讯云移动推送。
以上是关于React Native如何从另一个组件调用函数的完善且全面的答案。
相关·内容
在将我的应用程序的导航处理从react- native -router-flux移动到react-router-native时，我似乎发现了一个问题，即如何处理我的应用程序的本机UI组件。
我的应用程序有几个动画数据图，我用Java语言实现了它们，并将它们作为导入到React Native中。可视化是由在加载ui组件时启动的后台线程上的一些耗费资源的可运行程序提供支持的。以前，我通过将本机ui组件(isVisible)的一个属性更改为false来停止这些线程。
但是，当使用react-router-native从包含这些本机ui组件之一的屏幕离开时(它会在转换时卸载组件)，即使在react组件
浏览 1提问于2017-06-05得票数 3
2回答
我刚开始有反应，我也面临过这样的问题：
我有一个带有按钮的Main.js文件：
import * as React from 'react';
import { StyleSheet, Text, View, SafeAreaView, Pressable, Alert } from 'react-native';
import { MaterialIcons, MaterialCommunityIcons} from '@expo/vector-icons';
import { DrawerActions } from '@react-
浏览 4提问于2022-03-17得票数 0
1回答
调用钩子中另一个类的方法
、、、
大家好，我有一个关于反应本土化的问题。( 1)我如何在钩子中调用另一个类？例如，如果我有：
import React, { Component, useEffect, useState} from 'react';
import { TextInput } from 'react-native-paper';
import { View,Text} from 'react-native';
import Utils from './Utils';
export default function Userprofile() {
浏览 9提问于2022-09-04得票数 0
回答已采纳
是否可以在我的App.js呈现中调用另一个呈现()。我刚开始处理本能反应，所以看起来很愚蠢。
我创建以下文件。Splash.js
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default class Splash extends Component {
render() {
return (
<View style={styles.container}>
浏览 1提问于2018-08-02得票数 0
回答已采纳
我是刚开始的react本机开发，我尝试在我的应用程序中添加一个登录/注册，我通过电子邮件和facebook登录很好(我在Firebase数据库中，所以没关系)。我想在用户登录后显示另一个视图。下面是我的firebaseconfig (在我的登录中导入)：
export async function loginUser(email, password) {
try {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(response => {
浏览 3提问于2020-02-17得票数 0
我有一个带有导出函数的助手文件。我有一个带有一些共享数据的ContextProvider。现在，我需要从助手函数内部更改上下文中的数据。
但是，如果我在函数体内调用useContext语句，如果在外部调用它，也会出现错误。
如果我在助手文件中创建一个默认函数MyHelper()，我可以调用useContext内部及其工作。但是，我不能使用来自另一个文件的不同函数作为api。只有MyHelper()。
如何在另一个.js文件中调用多个导出函数并更改上下文数据？
我制作了一个示例代码，它显示了我的问题，而没有原始代码的开销：
MyScreen.js
import React, {useContex
浏览 3提问于2021-03-19得票数 1
回答已采纳
当将方法拆分为单独的类文件时，如何从另一个文件中访问这些类？
例如，在included.js中，我有以下内容：
'use strict'
import React, { Component } from 'react';
import {
AsyncStorage,
} from 'react-native';
var myClass = React.createClass({
doStuff: function(){
return 'Hello';
},
render: fun
浏览 1提问于2016-09-27得票数 1
回答已采纳
1回答
我不是在上课，我想学习如何手动操作。我正在处理登录屏幕。如果你想给我看你的代码，你需要保存和共享链接。所以我想要一个用于显示textbox的函数组件(假设ChildComponent是函数名，所以是export ChildComponent)。
因此，在“家长/屏幕1”中，我有类似的东西，对吗？
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'exp
浏览 4提问于2021-02-14得票数 2
回答已采纳
1回答
我正在试图弄清楚解除国家是如何运作的。目前，我正尝试在另一个组件中使用onPress来更改状态。在我下面提供的小吃演示中，ListHome和MapHome由于某些原因没有响应，但是您仍然会看到我正在尝试完成的任务。
我想要地图和列表“按钮”来完成“点击这个”所做的工作。
-没有错误的当前实现，只是没有反应，除了闪光灯从可触摸的不透明度。(也要记住，由于某种原因，零食没有反应。我的本地设备工作正常)
编辑:为了清楚起见，我希望能够从另一个组件访问和更改状态whichComponentToShow。即ListHome组件。
export default class Home extends Re
浏览 3提问于2021-09-13得票数 7
回答已采纳
值得注意的参考：
我的目标是更好地理解React是如何重新渲染的，无论是在每次状态更新时还是在所有状态更新之后。
我目前的理解是React re-render on every state update，如果你有两个状态更新one outside of an async operation, and one inside，就会导致Can't perform a react state update on an unmounted component。如果您更新一个状态，然后在异步操作try, catch, finally中执行另一个状态更新，则会发生此错误。
使用Can't p
浏览 3提问于2020-09-20得票数 1
Child.js： export default class Child extends Component {
testFunc = () => {
console.log("test")
}
componentDidMount() {
this.props.onRef(this)
} Parent.js： export default class Parent extends Component {
render() {
return (
<>
<Child onRef = {ref =&
浏览 15提问于2020-07-13得票数 0
回答已采纳
2回答
不知道为什么，但是当从另一个函数访问方法时，模式没有关闭。我可以在组件中对该方法进行控制台日志记录，但该方法就是不起作用。 这是closeModal()函数所在的主ReviewsScreen.js import React, {Component} from 'react';
import {Modal} from 'react-native';
import {TouchableOpacity} from 'react-native';
import {View, Text, StyleSheet} from 'react-nativ
浏览 14提问于2021-04-09得票数 0
与标题一样，我在调用()时，对于idToken和accessToken值将获得null。
代码(与中的示例相同)：
export async function googleLogin() {
try {
// add any configuration settings here:
await GoogleSignin.configure();
const data = await GoogleSignin.signIn();
google-services.json文件已经就位，以前运行良好。在从Reactive0.59.9迁移到0.
浏览 1提问于2019-12-29得票数 1
1回答
我在React Native中的导航器有问题。当我按下一些文本时，我想导航到另一个屏幕，但我得到了一个奇怪的错误，我不太确定为什么。
这是我的代码块和我收到的错误的图片。
'use strict'
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import ViewContainer from '../components/ViewContainer
浏览 0提问于2016-08-02得票数 0
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
我们如何在react-native和react web项目之间使用共享组件。我读过react native可以从react派生。如何在两个项目之间(全部或部分)使用相同的js代码？
浏览 16提问于2020-05-04得票数 0
回答已采纳
我想将一个值-3的状态传递给另一个使用值- 1的功能组件。我如何做到这一点？
我的代码：
屏幕1。
import { Text, TouchableOpacity } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";
export default function ScreenOne() {
const navigation = useNavigation();
const
浏览 2提问于2022-03-04得票数 0
在我的React中，当我将navigation传递给一个类组件时，它会把它放到另一个navigation对象中，现在我必须再添加一个navigation来调用navigate()方法。
所以，不用this.props.navigation.navigate("somewhere")，我必须使用this.props.navigation.navigation.navigate("somewhere")
下面是如何将navigation从函数式组件传递给类组件的方法：
const ParentComponent = ({ navigation }) => {
浏览 5提问于2022-02-05得票数 0
回答已采纳
1回答
我需要在文件artistPage.js中引用TabNavigator in index.ios.js。特别是，当用户在页面TabBar上时，我需要更改样式以隐藏artistPage。
我怎么能这么做？有什么想法吗？
我试图在道具中转换样式，但是有只读模式(
index.ios.js
'use strict'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image,
Text,
NavigatorIOS,
Touch
浏览 2提问于2016-07-05得票数 4
回答已采纳
我正在尝试理解如何在React-Native中做两件事。
问题1:我有一个组件和另一个需要在ScrollView中滚动的自定义组件。
问题是我太新了，还不能理解如何从我的“孩子”组件访问滚动视图。注意:如果我不使用定制组件并将所有内容都放入MainView组件中，代码就能正常工作。
下面是代码的基本内容：
class MainView extends React.Component{
render() {
return (
<ScrollView ref='scrollView'>
<MyCustomComponent />
浏览 0提问于2016-02-04得票数 1
3回答
在react native中：
如何创建扩展另一个组件的组件，而不是从react扩展基本组件
因此，不是：
export default class XXX extends Component {
我需要创建一个类Base
export default class XXX extends Base {
哪里
export default class Base extends Component {
整个想法是创建一个Base组件，将其用作所有其他组件的基类。
浏览 4提问于2017-04-30得票数 1
3回答
import React, { useEffect, useState } from 'react'
import { Text } from 'react-native'
export default function Counter() {
const [count, setCount] = useState(0)
useEffect(() => {
const id = setInterval(() => setCount((count) => count + 1), 1000)
return () =&g
浏览 53提问于2021-03-18得票数 1
回答已采纳
我正在从React本机组件进行异步API调用。我想展示我的活动旋转，直到我得到回复。不推荐使用setProps()函数。我知道，在呈现AddressForm.js父元素时，我可以从它那里传递一个支持项。但是，在得到停止旋转器的响应后，如何更改父元素的状态--这里是我的代码：
地址表格：
import React from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import {
FormLabel,
FormInput,
Button,
} from
浏览 0提问于2018-11-24得票数 0
回答已采纳
当我单击菜单到另一个场景时，有人能帮助我如何关闭sidemenu响应本地流量吗？
我试过了，但还是无法接近
这里是我的drawerlayout.js代码
import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
expo
浏览 4提问于2017-05-02得票数 0
回答已采纳
由于我刚开始接触react-native，我只是尝试在react-native中构建一个可以导航的简单应用程序。
index.js
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
import {Navigatio
浏览 0提问于2020-02-20得票数 1
回答已采纳
1回答
我创建了一个按照我想要的方式格式化日期的组件，但我创建了另一个组件，它是一个使用"react-native- modal -datetime-picker“的DateTimePicker，但有一个显示模式的按钮，当用户选择日期时，它会在按钮上显示已经格式化的日期和日期上方的标签。
问题是，我需要在我的视图中使用该日期值，而我不知道如何从我的组件中获取该值。
我的DateFormatter (我需要该文本的值)：
import React from 'react';
import {Text} from 'react-native';
export de
浏览 0提问于2017-05-25得票数 0
我正在用React创建简单的倒计时组件--原生的并且使用这个包react-native-countdown-component，我想破坏这个Timer组件或者在焦点屏幕改变时停止它的执行，对于底层导航我使用的是React-Native Tab navigation，什么是最好的解决方案来达到这个结果？
import { MaterialCommunityIcons } from "@expo/vector-icons";
import React, { useEffect, useState } from "react";
import { View } f
浏览 3提问于2022-01-29得票数 3
回答已采纳
我已经尽了最大努力遵循和的指示。Android (react-native run-android)按预期运行在Android模拟器和我的设备上，即在每次新安装或更新后重新加载JS文件。但是，当我安装functionality (react-native run-android --variant=release)时，它会显示应用程序的第一个屏幕，而应用程序的任何功能都不起作用。我还没有尝试在iOS上安装。它似乎没有从codepush加载JS文件。当我检查日志文件(在模拟器上安装版本构建时)，它挂在下面一行：
[CodePush] Loading JS bundle from "ass
浏览 6提问于2017-09-04得票数 1
3回答
我有一个带有主屏幕的应用程序，在这个屏幕上，我呈现一个 modal ，它在button press上打开，在Modal中我有一个按钮，应该将我导航到另一个屏幕，它正确地导航，但是当我导航到另一个屏幕时，模式不会消失，我如何隐藏它？
添加要演示的代码
主页：
import React, { Component } from 'react';
import Modal from './Modal';
class Home extends Component {
state = {
isModalVisible: false
};
toggle
浏览 0提问于2018-09-18得票数 7
回答已采纳
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
回答已采纳
我有一个项目(作业)列表，当一个项目(作业)被选中时，一个新的场景就会被打开。我希望在不使用Redux的情况下，将所选项目的ID从带有列表的场景传递到另一个场景，其中包含有关所选项目(作业)的详细信息。
路由器
import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import JobsList from './components/JobsList';
import Job from './components/Job&#
浏览 1提问于2017-03-06得票数 1
回答已采纳
Button.js
import { View, Text, TouchableOpacity, Button} from 'react-native';
import React from 'react';
export default function Btn (bgColor, textColor, btnLabel) {
return (
<TouchableOpacity
style={{
backgroundColor: bgColor,
borderRadius: 100,
浏览 5提问于2022-11-03得票数 2
2回答
所以我现在有一个呈现组件NewButton的函数，在该组件中，如何调用函数toggleModalVisibility，它是在该组件之外定义的？该函数将改变许多状态，调用其他函数，也会更改呈现。
import React, { useState, useEffect} from 'react'
import {Button, View, Text, StyleSheet,TextInput,ScrollView, Modal} from 'react-native'
import { BottomSheet } from 'react-native-bt
浏览 4提问于2022-03-17得票数 1
回答已采纳
我有一个问题，下面是我的代码： import React, { Component } from 'react';
import Meteor, {
withTracker,
} from 'react-native-meteor'
import { connect } from 'react-redux';
class CreateCommunityContainer extends React.Component{
static navigationOptions = {
title: 'Community
浏览 18提问于2019-02-12得票数 0
回答已采纳
在我的react本机应用程序中，我已经开始使用自定义钩子，我创建了一个钩子来检索用户坐标，但是当我的useGeolocation钩子被调用时(在handleUpdateLocation方法中)，我总是收到以下警告：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of Rea
浏览 14提问于2022-09-06得票数 -1
2回答
我正在导出从获取的JSON。我知道我有一个绑定问题，但我不完全确定如何继续将我的函数绑定到当前组件。我在这个URL 上有一个快速的例子。
app.js
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
import { getMovies } from './utility.js';
export default class FetchExample extends R
浏览 2提问于2018-12-11得票数 1
回答已采纳
大家好，我是React-native的新手，我想知道如何在单击一个组件中的按钮时调用另一个组件的函数，如下所示。我想在单击AlbumHeader get中的按钮时调用PlayWidget组件中的onPlayPress()函数 AlbumHeader.tsx文件 export type AlbumHeaderProp = {
album: Album;
}
const AlbumHeader = (props: AlbumHeaderProp) => {
const { album } = props;
const playallSong = () =&
浏览 55提问于2021-06-16得票数 0
在我的应用程序中，我使用了react-native-swiper组件。最初它工作正常，但最近它有一个奇怪的行为。它有5个窗口，像这样滑动。1-2-3-4-5-1
它刷了7次，物品是这样的。从第一个开始。我可以向左划一次。向右滑动5次。这就是全部。
我该如何解决这个问题？我使用的是1.5.6版本
import React from "react";
import { Dimensions } from "react-native";
import Swiper from "react-native-swiper";
import SwiperWin
浏览 0提问于2018-06-15得票数 0
2回答
我是react原生的新手。我已经使用了Wix react-native导航库来在页面之间导航。我想为导航编写一个单独的类，比如bellow，并在我的项目中需要它的任何地方调用它。但是我得到了"this.props.componentId“的错误。下面是我的导航函数： ScreenNavigation.js import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Co
浏览 11提问于2019-01-23得票数 0
我正在尝试测试是否在我的组件的componentDidMount钩子中调用了函数。
我使用React-Native和Jest来测试我的组件。
该组件如下所示：
const tracker = new GoogleAnalyticsTracker('UA-79731-33');
class MyComponent extends Component {
componentDidMount() {
tracker.trackScreenView(this.props.title);
}
}
所以我模拟了一下GoogleAnalyticsTracker
浏览 1提问于2017-02-20得票数 2
1回答
用户登录后，我希望在标题中显示名称。我读过关于如何传递道具的文章，但我看到的是当您从另一个组件访问另一个组件状态时，这再次让您洞察另一个组件。如何在不呈现其他组件的情况下访问另一个组件的状态？在这里，我不想呈现标题组件洞察我的登录组件和好奇
在这里，我重定向是为了传递状态(但是由于我重定向到'/‘是主组件而不是头组件，我仍然不知道如何在组件头中访问它。
如果我没有使用重定向，我将如何将它传递给另一个？
类头扩展React.Component { render () {返回( Home Login )}}
登录组件：
class Login extends Rea
浏览 1提问于2017-08-06得票数 1
回答已采纳
1回答
我有以下to组件： RestaurantTemplate :
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, View,TouchableOpacity} from 'react-native';
import { RestaurantData } from '../../Data';
import { connect } from 'react-re
浏览 18提问于2020-10-26得票数 1
回答已采纳
我遇到了许多关于这个问题的线索，但都没有找到解决方案。其中大部分是针对web应用程序的。如果有任何帮助，我将非常感激。谢谢你找我。
package.json
"dependencies": {
"lodash": "^4.17.4",
"native-base": "^2.2.1",
"react": "16.0.0-alpha.12",
"react-native": "0.46.1",
"rea
浏览 5提问于2017-07-14得票数 0
我在我的应用程序中使用了react-native-simple-picker，如果我使用默认的显示按钮，它在我的项目中工作得很好，但当我在项目中使用不同的按钮时，我想显示选取器。看起来ProposalPicker.js中的this.refs.picker.show()是需要调用的函数，但是我不确定如何从另一个组件文件访问它。目前，我的代码导致以下错误-‘`Cannot read property 'show’of undefined。感谢任何人的帮助。
ProposalPicker.js
import React, { Component } from 'react';
浏览 3提问于2018-09-27得票数 2
我是React Native的新手，正在尝试创建我的第一个应用程序。所以我有一个问题：
我有两个屏幕(使用react导航)。在第一个屏幕上，有一个渲染的应用程序徽标与旋转(从本机基地)，并获取到服务器的同时。只有当fetch结束并且响应被处理时，我才需要导航到另一个屏幕。请帮我找出我的错误！
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,TouchableHighlight
} fro
浏览 0提问于2017-07-27得票数 1
回答已采纳
我正在尝试创建一个React Native电子商务应用程序，其中显示了特色产品，但随后用户可以通过从底部弹出的表单查看类别列表，该表单将从所述类别加载产品。 我已经设法使用react-native-btr的BottomSheet创建了这样一个底表。但是，显示/隐藏组件的功能(简单地切换布尔值的状态)需要对组件本身可用(以处理后退按钮和背景按键)。 这是组件代码： const TestNav = (props, ref) => {
const [visible, setVisible] = useState(false);
const toggleVisible = () =&
浏览 46提问于2021-04-27得票数 1
1回答
使用ReactiveNavigation6，，他们建议您使用组来最小化嵌套导航器。
但是，我不知道如何在本例中使用Tab Navigator中的嵌套堆栈：
import * as React from 'react';
import { View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navi
浏览 16提问于2022-03-29得票数 1
回答已采纳
我正在用React Native创建一个聊天应用程序，它接收不同的“消息类型”作为响应。其中一个包含一个按钮数组，我目前正在组件"ChatQuickReply“中的Flatlist中呈现这些按钮，如下所示： import React from "react";
import {
StyleSheet,
FlatList,
View,
TouchableOpacity,
Text
} from "react-native";
class ChatQuickReply extends React.Component {
const
浏览 28提问于2019-04-10得票数 2
回答已采纳
我正在使用编写组件的测试。
一个(非常精简的) NoResults组件：
import React from 'react'
import { Text, View } from 'react-native'
import { connectStateResults } from 'react-instantsearch-native'
const NoResults = ({ searching, searchState: { query } }) => searching || !query ? null : (
<View
浏览 1提问于2019-06-03得票数 2
假设我有一个位于场景内部的comp (react-native-router-flux)。它让人们选择他们最喜欢的水果。
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {MKCheckbox} from 'react-native-material-kit';
var styles = StyleSheet.create({});
export default class PickAFrui
浏览 0提问于2016-11-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
