在React Native中，父组件向子组件传递数据通常通过props实现，而子组件向父组件传递数据则通常通过回调函数实现。下面是一个简单的示例，演示了父组件向子组件传递数据和子组件向父组件传递数据的方法：

父传子

父组件

// ParentComponent.js
import React from 'react';
import { View } from 'react-native';
import ChildComponent from './ChildComponent';const ParentComponent = () => {const dataFromParent = "Hello from Parent";return (<View><ChildComponent data={dataFromParent} /></View>);
}export default ParentComponent;

子组件

// ChildComponent.js
import React from 'react';
import { Text } from 'react-native';const ChildComponent = ({ data }) => {return (<Text>{data}</Text>);
}export default ChildComponent;

在这个例子中，父组件ParentComponent通过props向子组件ChildComponent传递了一个名为data的数据。

子传父

父组件

// ParentComponent.js
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import ChildComponent from './ChildComponent';const ParentComponent = () => {const [dataFromChild, setDataFromChild] = useState('');const handleDataFromChild = (data) => {setDataFromChild(data);};return (<View><Text>Data from Child: {dataFromChild}</Text><ChildComponent onDataReceived={handleDataFromChild} /></View>);
}export default ParentComponent;

子组件

// ChildComponent.js
import React from 'react';
import { Button } from 'react-native';const ChildComponent = ({ onDataReceived }) => {const sendDataToParent = () => {onDataReceived("Hello from Child");};return (<Button title="Send Data to Parent" onPress={sendDataToParent} />);
}export default ChildComponent;

在这个例子中，子组件ChildComponent通过接收一个名为onDataReceived的prop，当按钮被点击时，调用该函数并传递数据给父组件。父组件在接收到数据后更新自己的状态，并重新渲染以反映数据的变化。

父组件调用子组件方法

子组件

import React, { forwardRef } from 'react';// 使用 React.forwardRef 包装子组件
const ChildComponent = forwardRef((props, ref) => {// 定义子组件的方法const childMethod = () => {console.log('Child method called');};// 将子组件的方法绑定到 refReact.useImperativeHandle(ref, () => ({childMethod,}));return (<div><p>Child Component</p></div>);
});export default ChildComponent;

父组件

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {// 创建一个 ref 来引用子组件const childRef = useRef(null);// 在父组件中定义一个方法，用于调用子组件的方法const callChildMethod = () => {// 检查子组件是否已经挂载if (childRef.current) {// 调用子组件的方法childRef.current.childMethod();}};return (<div>{/* 将 ref 传递给子组件 */}<ChildComponent ref={childRef} />{/* 按钮用于触发父组件中的方法 */}<button onClick={callChildMethod}>Call Child Method</button></div>);
};export default ParentComponent;

子组件调用父组件的方法

父组件

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {// 定义父组件的方法const parentMethod = () => {console.log('Parent method called');};return (<div>{/* 将父组件的方法作为 prop 传递给子组件 */}<ChildComponent parentMethod={parentMethod} /></div>);
};export default ParentComponent;

子组件

// 子组件 ChildComponent.js
import React from 'react';const ChildComponent = ({ parentMethod }) => {const handleClick = () => {// 在子组件中调用父组件传递的方法parentMethod();};return (<div><button onClick={handleClick}>Call Parent Method</button></div>);
};export default ChildComponent;