在 react-native 中发送带有导航的参数

Question

我正在学习使用导航，我有一个订单页面和一个订单页面上的 order_detail 页面，我创建了一个输入表单，并在将输入贡献给 order_detail 页

这是订购页面：

 ongNavigationDetail = ()=>{
        let params = {
            origin: this.state.selectOrigin.id_origin,
            destinasi_sub_city : this.state.selectSubDestinasi.id_kecamatan
        }
        // console.log(params)
        this.props.navigation.navigate('orderdetail',{data:params})
    }

在ongNavigationDetail函数中，我将输入的结果存入一个变量，即params。控制台日志结果

{"destination_sub_city": "1", "origin": "39"}

并且在订单详情页面，我想把订单页面的输入结果，输入到url

页数order_detail:

constructor(){
    super();
        this.state = {
            results: [],
    }
}

componentDidMount(){
    this.cekData();
}


cekData= () =>{
        let params = this.props.data; //the results of my order page input here
        const url = 'https://example/price?id_origin=&id_destinasi='
        fetch(url)
        .then((response)=> response.json())
        .then((responseJson)=>{
        this.setState({
            results: responseJson.data.jenis,
            isLoading : false
        })
    }

问题是如何在使用状态的订单页面上获取输入参数，然后输入URL？这里url我使用手动值

谢谢:)

Answer 1

取决于您使用的 React Navigation 版本：

// Old versions
const { destination_sub_city } = this.props.navigation.state.params;
const destination_sub_city = this.props.navigation.getParam('destination_sub_city');

// Latest version (5.x)
const { destination_sub_city } = this.props.route.params;

对于 React Navigation v4.x，它应该是这样的：

cekData = () => {
  const { 
    destinasi_sub_city,
    origin
  } = this.props.navigation.getParam('data');

  const url = `https://example/price?id_origin=${origin}&id_destinasi=${destinasi_sub_city}`;

  fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        results: responseJson.data.jenis,
        isLoading : false
      });
    });
};

在 react-native 中发送带有导航的参数

send parameters with navigation in react-native

navigation

state

native

reactjs

react-native