如何在react native中发送参数_使用webview - React Native发送参数_如何在react native中将2个参数发送到useCallback - 腾讯云开发者社区

在React Native中发送参数通常涉及两个方面：一是向组件传递参数，二是通过API发送网络请求时附带参数。下面我将分别解释这两种情况。

向组件传递参数

在React Native中，可以通过props向子组件传递参数。以下是一个简单的例子：

// 父组件
import React from 'react';
import { View } from 'react-native';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = { name: 'John', age: 30 };

  return (
    <View>
      <ChildComponent data={data} />
    </View>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';
import { Text } from 'react-native';

const ChildComponent = (props) => {
  return (
    <Text>{`Name: ${props.data.name}, Age: ${props.data.age}`}</Text>
  );
};

export default ChildComponent;

通过API发送网络请求时附带参数

在React Native中，可以使用fetch、axios或其他HTTP客户端库发送带有参数的网络请求。以下是使用fetch的示例：

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const fetchData = async () => {
  const params = { userId: 123 };
  const queryParams = new URLSearchParams(params).toString();
  const response = await fetch(`https://api.example.com/data?${queryParams}`);
  const data = await response.json();
  return data;
};

const DataFetchingComponent = () => {
  useEffect(() => {
    fetchData().then((data) => {
      console.log(data);
    });
  }, []);

  return (
    <View>
      <Text>Loading data...</Text>
    </View>
  );
};

export default DataFetchingComponent;