如何使用axios将参数传递给另一个屏幕？

Question

我在做phone号码的验证，我要将phone号码传给另一个checkCode.js组件。我已经看到将它作为 pramas 传递 navigate() 的示例，但是我如何才能在另一个组件中接收它。

register.js

const SignUp = ({ navigation }) => {
  const [phoneNumber, setPhoneNumber] = useState('');

  let register = "https://app.herokuapp.com/api/v1/auth/register" 
  let sendVerification = "https://app.herokuapp.com/api/v1/auth/sendVerification-otp"

  const signUp = () => {
    
    const userParams = {
      phone: phoneNumber,
    };
    const requestOne = axios.post(register, userParams)
    const requestTwo = axios.post(sendVerification, userParams)
    axios
    .all([requestOne, requestTwo], userParams)
    .then(axios.spread((...responses) => {
       navigation.navigate('CodeVerification')
      }))
      .catch((err) => {
        console.log('the error:', err.message);
      })
  }

checkCode.js

export default function CodeVerification({navigation}) {

    //need phoneNumber param in this component

    const [code, setCode] = useState('');
    
    const confirm = () =>{
        const userParams = {
            phone: "+11111111",
            code:code,
        };
        axios
        .post('https://app.herokuapp.com/api/v1/auth/sendVerification-otp', userParams)
        .then((response) =>{
            console.log('response', response.data);
            navigation.navigate('Welcome')
        })
        .catch((error) => {
            console.log('the error:', error.message);
          });

    };

如何才能通过？

Answer 1

您可以使用Context Api

上下文 api 通常用于将数据传输到另一个组件。

Answer 2

这可能有帮助

register.js

const SignUp = ({ navigation }) => {
  
  // existing code remains the same 

  const signUp = () => {
    ....
    axios
      .all([requestOne, requestTwo], userParams)
      .then(
        axios.spread((...responses) => {
         
          // send params like this 
          navigation.navigate("CodeVerification", {phone: phoneNumber});
        })
      )
      .catch((err) => {
        console.log("the error:", err.message);
      });
  };
};

checkCode.js

export default function CodeVerification({ route, navigation }) {
  
  // get phoneNumber from props
  const {phone} = route.params;  // UPDATED this line

  const [code, setCode] = useState("");

  ....
}

如何使用axios将参数传递给另一个屏幕？

How to pass the parameter to another screen using axios?

react-native