React Native新手求助：如何将页面输入状态作为API调用参数？

嘿，别着急！作为React Native新手遇到导航相关的问题太正常了，我来帮你一步步梳理解决～

先理清问题根源 #

你提到能在目标页面用this.props.navigation.state.params.term显示用户输入的数据，说明目标页面的导航props是正常工作的，问题大概率出在你的输入页面组件上——它没有正确获取到navigation这个props。

下面分两种组件类型给出针对性解决方案：

如果你用的是类组件 #

1. 确保组件是导航栈的直接屏幕 #

先检查你的导航配置，确认输入页面是被导航器（比如createStackNavigator）直接注册为屏幕的：

import { createStackNavigator } from '@react-navigation/stack';
import InputScreen from './InputScreen'; // 你的输入页面组件
import ResultScreen from './ResultScreen'; // 显示参数的页面

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      {/* 必须把输入页面作为栈的Screen组件 */}
      <Stack.Screen name="Input" component={InputScreen} />
      <Stack.Screen name="Result" component={ResultScreen} />
    </Stack.Navigator>
  );
}

2. 若组件是嵌套子组件，用withNavigation高阶组件 #

如果你的输入组件是某个屏幕的子组件（不是直接被导航器管理的），可以用withNavigation包裹它，让它能获取到导航props：

import React, { Component } from 'react';
import { TextInput, Button } from 'react-native';
import { withNavigation } from '@react-navigation/compat';

class InputComponent extends Component {
  state = { term: '' };

  handleSubmit = () => {
    const { term } = this.state;
    // 现在可以正常使用this.props.navigation了
    // 先调用API，把term作为参数传入
    fetch(`https://your-api-endpoint.com?query=${term}`)
      .then(res => res.json())
      .then(apiData => {
        // 导航到结果页，同时传递API返回数据和用户输入的term
        this.props.navigation.navigate('Result', { term, apiData });
      });
  };

  render() {
    return (
      <>
        <TextInput
          value={this.state.term}
          onChangeText={(text) => this.setState({ term: text })}
          placeholder="输入内容"
        />
        <Button title="提交并调用API" onPress={this.handleSubmit} />
      </>
    );
  }
}

// 用withNavigation包裹组件后，就能拿到navigation props了
export default withNavigation(InputComponent);

3. 检查函数的this绑定 #

如果你的提交函数是普通函数（不是箭头函数），要确保在构造函数里绑定this，否则this.props会指向错误：

constructor(props) {
  super(props);
  this.state = { term: '' };
  // 绑定this，确保函数里的this指向组件实例
  this.handleSubmit = this.handleSubmit.bind(this);
}

// 普通函数写法
handleSubmit() {
  const { term } = this.state;
  // ...调用API和导航逻辑
}

如果你用的是函数组件 #

函数组件可以直接用useNavigation钩子来获取导航对象，不需要依赖props：

import React, { useState } from 'react';
import { TextInput, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function InputComponent() {
  const [term, setTerm] = useState('');
  // 用useNavigation钩子获取navigation对象
  const navigation = useNavigation();

  const handleSubmit = () => {
    // 调用API，传入term参数
    fetch(`https://your-api-endpoint.com?query=${term}`)
      .then(res => res.json())
      .then(apiData => {
        // 导航到结果页
        navigation.navigate('Result', { term, apiData });
      });
  };

  return (
    <>
      <TextInput
        value={term}
        onChangeText={setTerm}
        placeholder="输入内容"
      />
      <Button title="提交并调用API" onPress={handleSubmit} />
    </>
  );
}

export default InputComponent;

补充：API调用的常见写法 #

当你能正常拿到navigation后，就可以把state里的term作为API参数灵活传递了：

• 如果是GET请求，直接拼接URL参数（如上面的例子）
• 如果是POST请求，把参数放在请求体里：

// 类组件写法
fetch('https://your-api-endpoint.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ term: this.state.term }),
})

// 函数组件写法
fetch('https://your-api-endpoint.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ term }),
})

内容的提问来源于stack exchange，提问作者R. Tsang