React Native - навигация по двум экранам с использованием двух разных запросов на выборку - PullRequest
Новая
       6

React Native - навигация по двум экранам с использованием двух разных запросов на выборку

0 голосов
/ 15 мая 2018

Я новичок в реакции на родную. Я создаю плоский список, который содержит кнопки категорий продуктов, и после нажатия кнопки категории будет отображаться вторая страница, содержащая виды продуктов в зависимости от того, какую кнопку категории нажимает пользователь.

Имена кнопки категории загружаются из моей базы данных, поэтому у меня есть выборка для этого. Теперь, как я уже сказал, мне нужно отобразить вторую страницу после нажатия кнопки.

Я уже написал код, в котором есть 2 вида запроса на выборку для отображения названия моей категории в кнопке и перехода на вторую страницу с использованием другой выборки.

Проблема в том, при нажатии кнопки категории моя кнопка не будет отображать никакую вторую страницу.

Вот мой код

categories.js 

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity
} from 'react-native';

var screen = Dimensions.get('window');*/

export default class Categories extends Component {
    static navigationOptions = {
        title: 'Product2'
    };

    state = {
        data: [],
    };


    fetchData = async() => {
        const response_Cat = await fetch('http://192.168.254.102:3307/Categories/');
        const category_Cat = await response_Cat.json();
        this.setState({data: category_Cat});
    };
    componentDidMount() {
        this.fetchData();
    };

    FoodCat = async() => {
        const { params } = this.props.navigation.navigate('state');
        const response_Food = await fetch('http://192.168.254.102:3307/foods/' + params.id);
        const food_Food = await response_Food.json();
        this.setState({data: food_Food});
    };
    componentDidCatch() {
        this.FoodCat();
    };

  render() {
      const { navigate } = this.props.navigation;
      const { params } = this.props.navigation.navigate('state');
      return (
          <View style = { styles.container }>
              <FlatList
                data = { this.state.data }
                renderItem = {({ item }) =>
                    <TouchableOpacity style = {styles.buttonContainer}>
                        <Text style = {styles.buttonText}
                        onPress = { () => navigate('FoodCat', { id: item.id }) }>{ item.cat_name }</Text>
                    </TouchableOpacity>                    
                }
                keyExtractor={(x,i) => i}
              />
          </View>
      );
  }

}

AppRegistry.registerComponent('Categories', () => Categories);

Details.js 

import React, {Component} from 'react';
import { AppRegistry, StyleSheet,
FlatList, Text, View }
from 'react-native';

export default class Details extends Component {
    constructor() {
        super()
        this.state = {
            dataSource: []
        }
    }

    renderItem = ({ item }) => {
        return (
            <View style = {{flex: 1, flexDirection: 'row'}}>
                <View style = {{flex: 1, justifyContent: 'center'}}>
                    <Text>
                        {item.menu_desc}
                    </Text>
                    <Text>
                        {item.menu_price}
                    </Text>
                </View>
            </View>
        )
    }

    componentDidMount() {
        const url = 'http://192.168.254.102:3307/foods/'
        fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson); 
            this.setState({
                dataSource: responseJson.data
            })
        })
        .catch((error) => {
            console.log(error)
        })
    }

    render(){
        console.log(this.state.dataSource)
        const { params } = this.props.navigation.navigate('state');
        return (
            <View style = { styles.container }>
                <FlatList
                    data = { this.state.dataSource }
                    renderItem = {this.renderItem}
                    keyExtractor={(item, index) => index.toString()}
                />
            </View>
        );
    }
}

AppRegistry.registerComponent('Details', () => Details);
...