отправлять параметры с навигацией в react-native - PullRequest
Новая
       30

отправлять параметры с навигацией в react-native

0 голосов
/ 07 мая 2020

Я учусь использовать навигацию, у меня есть страница заказа и страница 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. Результаты журнала consol 

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

и на странице сведений о заказе я хочу взять результаты ввода со страницы заказа и ввести их в URL-адрес

page 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=${1}&id_destinasi=${39}'
        fetch(url)
        .then((response)=> response.json())
        .then((responseJson)=>{
        this.setState({
            results: responseJson.data.jenis,
            isLoading : false
        })
    }

вопрос в том, как принимать входные параметры на странице заказа, используя состояние и ввод URL? здесь url я использую ручные значения

спасибо :)

1 Ответ

2 голосов
/ 07 мая 2020

В зависимости от того, какую версию 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
      });
    });
};
...