Проблемы, связанные с навигацией React и передачей данных между компонентами - PullRequest
Новая
       5

Проблемы, связанные с навигацией React и передачей данных между компонентами

0 голосов
/ 15 марта 2020

Я пытаюсь передать некоторые данные из одного <FlatList/>˛ в компонент ниже. Если я избавлюсь от Stack Navigator, данные будут переданы правильно, и при логировании route.params выдаются правильные id, как показано в примере ниже 

import React, { useState } from 'react';
import { StyleSheet, Text, View, Picker } from 'react-native';
import { Provider as PaperProvider, Button, TextInput, HelperText } from 'react-native-paper';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { format } from 'date-fns'

import Header from '../navigation/Header';
import QRScanner from '../screens/QRscanner';
import MyDrawer from '../navigation/Drawer'


const Izmjena = ({navigation, route}) => {

    async function sendAkt() {
            fetch('http://192.168.5.12:5000/unosaktivnosti', {
                    method: 'post',
                    mode:'no-cors',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        name: ime,
                        opis: opis,
                        mjesto: mjesto,
                        datum: format(date, 'yyyy.MM.dd'),
                        tim: tim,
                        tip: pickerSel,
                        id: id
                        })
                    });
    }

    async function getData() {
        fetch('http://192.168.5.12:5000/aktfetch')
    }
    const [ime, setIme] = useState('')
    const [opis, setOpis] = useState('')
    const [tim, setTim] = useState('')
    const [mjesto, setMjesto] = useState('')
    const [pickerSel, setpickerSel] = useState('')



    function clear() {
        setIme('')
        setOpis('')
        setTim('')
        setMjesto('')
        setpickerSel('')
    }

    function getCurrentDate() {
        var dan = new Date().getDate(); //Current Date
        var mjesec = new Date().getMonth() + 1; //Current Month
        var godina = new Date().getFullYear(); //Current Year
        var datum = mjesec + '/' + dan + '/' + godina
        return datum
    }

    function scan() {
        const akt = {
            name: ime,
            opis: opis,
            mjesto: mjesto,
            datum: format(date, 'dd.MM.yyyy'),
            tim: tim,
            tip: pickerSel,
            id: id
        }
        navigation.navigate('Scanner', { aktiv: akt })
    }

    function noScan() {
        sendAkt();
        clear();
    }

    let datum = getCurrentDate()


    const [date, setDate] = useState(new Date(datum));
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);

    const onChange = (event, selectedDate) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
      };
      const showDatepicker = () => {
        showMode('date');
      };
      const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
      };
      console.log(route)
    return (
        <PaperProvider>
            <Header title='Unos nove aktivnosti' navigation={navigation}/>
                <View style={styles.container}>
                    <View style={styles.inputCon}>
                        <TextInput
                        multiline={true}
                        label='Ime aktivnosti'
                        mode='outlined'
                        value={ime}
                        style={styles.inputIme}
                        onChangeText={(value) => {
                            setIme(value)
                        }} 
                        />
                    </View>
                    <View style={styles.inputCon}>
                        <TextInput
                        multiline={true}
                        label='Opis aktivnosti'
                        mode='outlined'
                        style={styles.inputOpis}
                        value={opis}
                        onChangeText={(value) => {
                            setOpis(value)
                        }}
                        />
                    </View>
                    <View style={styles.inputCon}>
                        <TextInput
                        multiline={true}
                        label='Mjesto'
                        mode='outlined'
                        style={styles.inputOpis}
                        value={mjesto}
                        onChangeText={(value) => {
                            setMjesto(value)
                        }}
                        />
                    </View>
                    <View style={styles.inputCon}>
                            <Text style={styles.text}>Datum aktivnosti: {format(date, 'dd.MM.yyyy')}</Text>
                    </View>
                    <View style={styles.inputCon}>
                        <Text style={styles.text}>Organizator</Text>
                            <Picker
                                selectedValue={tim}
                                prompt='Odabir tima'
                                style={styles.pickerCon}
                                onValueChange={(itemValue, itemIndex) =>
                                setTim(itemValue)
                                }
                            >
                            <Picker.Item label='Odaberite tim' value='' />
                            <Picker.Item label='PREDSJ' value='27' />
                            <Picker.Item label='DOP' value='65' />
                            <Picker.Item label='IT' value='70' />
                            <Picker.Item label='MKT' value='73' />
                            <Picker.Item label='MULTIM' value='74' />
                            <Picker.Item label='RIF' value='79' />
                            <Picker.Item label='STARTER' value='81' />
                            <Picker.Item label='VK' value='82' />
                            <Picker.Item label='ZNAN' value='84' />
                            <Picker.Item label='DRU' value='90' />
                            <Picker.Item label='EVAL' value='91' />
                            <Picker.Item label='BUSINESS' value='96' />
                            <Picker.Item label='DEVELOP' value='97' />
                            <Picker.Item label='DATA' value='98' />
                            <Picker.Item label='ENG' value='99' />
                            <Picker.Item label='RI' value='100' />
                            <Picker.Item label='VŽ' value='101' />
                            <Picker.Item label='PR&EM' value='102' />
                            <Picker.Item label='DEA' value='103' />
                            <Picker.Item label='LEGAL' value='104' />
                            </Picker>
                    </View>
                    <View style={styles.inputCon}>
                        <Text style={styles.text}>Tip aktivnosti</Text>
                            <Picker
                                selectedValue={pickerSel}
                                style={styles.pickerCon}
                                prompt='Odabir vrste aktivnosti'
                                onValueChange={(itemValue, itemIndex) =>
                                    setpickerSel(itemValue)
                                }
                                >
                                    <Picker.Item label='Odaberite vrstu aktivnosti' value='' />
                                    <Picker.Item label="Predavanje" value="1" />
                                    <Picker.Item label="Sastanak" value="2" />
                                    <Picker.Item label="Radionica" value="4" />
                                    <Picker.Item label="Štandiranje" value="3" />
                                    <Picker.Item label="VIP sastanak" value="5" />
                                    <Picker.Item label="Izlet na buduće radno mjesto" value="6" />
                            </Picker>
                    </View> 
                    <View style={styles.inputCon}>
                    {show && (
                        <DateTimePicker
                        testID="dateTimePicker"
                        timeZoneOffsetInMinutes={0}
                        value={date}
                        mode={mode}
                        is24Hour={true}
                        display="default"
                        onChange={onChange}
                        />
                        )}
                    </View>
                    <View style={styles.buttonCon}>
                        <Button
                            icon='check-all'
                            mode='outlined'
                            onPress={() => {
                                if (ime === '' || mjesto === '' || tim === '' || pickerSel === '') {
                                    alert('Niste unjeli sve podatke')
                                } else {
                                    noScan();
                                }
                            }}
                        >Unos bez skeniranja</Button>
                        <Button
                            icon='barcode-scan'
                            mode='outlined'
                            onPress={() => {
                                if (ime === '' || mjesto === '' || tim === '' || pickerSel === '') {
                                    alert('Niste unjeli sve podatke')
                                } else {
                                    scan();
                                }
                            }}
                        >Skeniranje QR</Button>
                    </View>
                    <View style={styles.buttonCon}>
                            <Button
                            icon='calendar'
                            mode='outlined'
                            onPress={showDatepicker}
                            >Unesite datum</Button>
                        </View>
                </View>
        </PaperProvider>

    )
}

const Stack = createStackNavigator()

export default Izmjena


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    textCon: {
        height: '0%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    inputCon: {
        height: '10%',
        justifyContent: 'center',
        alignItems: 'center'
    },  
    inputIme: {
        width: '90%',
    },
    inputOpis: {
        width: '90%',
    },
    buttonCon: {
        height: '10%',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    surface: {
        padding: 8,
        height: 200,
        width: 200,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 4,
      },
    text: {
        fontSize: 20,
        fontWeight: '600'
    },
    pickerCon: {
        justifyContent: 'center',
        alignContent: 'center',
        width: '90%',
    },
})

Object {
  "key": "Dalje-PJkNl4d-",
  "name": "Dalje",
  "params": Object {
    "item_id": 3407,
  },
}

, но если я добавлю обратно Stack Navigator id больше не проходит нормально 

import React, { useState } from 'react';
import { StyleSheet, Text, View, Picker } from 'react-native';
import { Provider as PaperProvider, Button, TextInput, HelperText } from 'react-native-paper';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { format } from 'date-fns'

import Header from '../navigation/Header';
import QRScanner from '../screens/QRscanner';
import MyDrawer from '../navigation/Drawer'


const Izmjena = ({navigation, route}) => {

    async function sendAkt() {
            fetch('http://192.168.5.12:5000/unosaktivnosti', {
                    method: 'post',
                    mode:'no-cors',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        name: ime,
                        opis: opis,
                        mjesto: mjesto,
                        datum: format(date, 'yyyy.MM.dd'),
                        tim: tim,
                        tip: pickerSel,
                        id: id
                        })
                    });
    }

    async function getData() {
        fetch('http://192.168.5.12:5000/aktfetch')
    }

    const [ime, setIme] = useState('')
    const [opis, setOpis] = useState('')
    const [tim, setTim] = useState('')
    const [mjesto, setMjesto] = useState('')
    const [pickerSel, setpickerSel] = useState('')



    function clear() {
        setIme('')
        setOpis('')
        setTim('')
        setMjesto('')
        setpickerSel('')
    }

    function getCurrentDate() {
        var dan = new Date().getDate(); //Current Date
        var mjesec = new Date().getMonth() + 1; //Current Month
        var godina = new Date().getFullYear(); //Current Year
        var datum = mjesec + '/' + dan + '/' + godina
        return datum
    }

    function scan() {
        const akt = {
            name: ime,
            opis: opis,
            mjesto: mjesto,
            datum: format(date, 'dd.MM.yyyy'),
            tim: tim,
            tip: pickerSel,
            id: id
        }
        navigation.navigate('Scanner', { aktiv: akt })
    }

    function noScan() {
        sendAkt();
        clear();
    }

    let datum = getCurrentDate()


    const [date, setDate] = useState(new Date(datum));
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);

    const onChange = (event, selectedDate) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
      };
      const showDatepicker = () => {
        showMode('date');
      };
      const showMode = currentMode => {
        setShow(true);
        setMode(currentMode);
      };
      console.log(route)
    return (
        <PaperProvider>
            <Header title='Unos nove aktivnosti' navigation={navigation}/>
                <View style={styles.container}>
                    <View style={styles.inputCon}>
                        <TextInput
                        multiline={true}
                        label='Ime aktivnosti'
                        mode='outlined'
                        value={ime}
                        style={styles.inputIme}
                        onChangeText={(value) => {
                            setIme(value)
                        }} 
                        />
                    </View>
                    <View style={styles.inputCon}>
                        <TextInput
                        multiline={true}
                        label='Opis aktivnosti'
                        mode='outlined'
                        style={styles.inputOpis}
                        value={opis}
                        onChangeText={(value) => {
                            setOpis(value)
                        }}
                        />
                    </View>
                    <View style={styles.inputCon}>
                        <TextInput
                        multiline={true}
                        label='Mjesto'
                        mode='outlined'
                        style={styles.inputOpis}
                        value={mjesto}
                        onChangeText={(value) => {
                            setMjesto(value)
                        }}
                        />
                    </View>
                    <View style={styles.inputCon}>
                            <Text style={styles.text}>Datum aktivnosti: {format(date, 'dd.MM.yyyy')}</Text>
                    </View>
                    <View style={styles.inputCon}>
                        <Text style={styles.text}>Organizator</Text>
                            <Picker
                                selectedValue={tim}
                                prompt='Odabir tima'
                                style={styles.pickerCon}
                                onValueChange={(itemValue, itemIndex) =>
                                setTim(itemValue)
                                }
                            >
                            <Picker.Item label='Odaberite tim' value='' />
                            <Picker.Item label='PREDSJ' value='27' />
                            <Picker.Item label='DOP' value='65' />
                            <Picker.Item label='IT' value='70' />
                            <Picker.Item label='MKT' value='73' />
                            <Picker.Item label='MULTIM' value='74' />
                            <Picker.Item label='RIF' value='79' />
                            <Picker.Item label='STARTER' value='81' />
                            <Picker.Item label='VK' value='82' />
                            <Picker.Item label='ZNAN' value='84' />
                            <Picker.Item label='DRU' value='90' />
                            <Picker.Item label='EVAL' value='91' />
                            <Picker.Item label='BUSINESS' value='96' />
                            <Picker.Item label='DEVELOP' value='97' />
                            <Picker.Item label='DATA' value='98' />
                            <Picker.Item label='ENG' value='99' />
                            <Picker.Item label='RI' value='100' />
                            <Picker.Item label='VŽ' value='101' />
                            <Picker.Item label='PR&EM' value='102' />
                            <Picker.Item label='DEA' value='103' />
                            <Picker.Item label='LEGAL' value='104' />
                            </Picker>
                    </View>
                    <View style={styles.inputCon}>
                        <Text style={styles.text}>Tip aktivnosti</Text>
                            <Picker
                                selectedValue={pickerSel}
                                style={styles.pickerCon}
                                prompt='Odabir vrste aktivnosti'
                                onValueChange={(itemValue, itemIndex) =>
                                    setpickerSel(itemValue)
                                }
                                >
                                    <Picker.Item label='Odaberite vrstu aktivnosti' value='' />
                                    <Picker.Item label="Predavanje" value="1" />
                                    <Picker.Item label="Sastanak" value="2" />
                                    <Picker.Item label="Radionica" value="4" />
                                    <Picker.Item label="Štandiranje" value="3" />
                                    <Picker.Item label="VIP sastanak" value="5" />
                                    <Picker.Item label="Izlet na buduće radno mjesto" value="6" />
                            </Picker>
                    </View> 
                    <View style={styles.inputCon}>
                    {show && (
                        <DateTimePicker
                        testID="dateTimePicker"
                        timeZoneOffsetInMinutes={0}
                        value={date}
                        mode={mode}
                        is24Hour={true}
                        display="default"
                        onChange={onChange}
                        />
                        )}
                    </View>
                    <View style={styles.buttonCon}>
                        <Button
                            icon='check-all'
                            mode='outlined'
                            onPress={() => {
                                if (ime === '' || mjesto === '' || tim === '' || pickerSel === '') {
                                    alert('Niste unjeli sve podatke')
                                } else {
                                    noScan();
                                }
                            }}
                        >Unos bez skeniranja</Button>
                        <Button
                            icon='barcode-scan'
                            mode='outlined'
                            onPress={() => {
                                if (ime === '' || mjesto === '' || tim === '' || pickerSel === '') {
                                    alert('Niste unjeli sve podatke')
                                } else {
                                    scan();
                                }
                            }}
                        >Skeniranje QR</Button>
                    </View>
                    <View style={styles.buttonCon}>
                            <Button
                            icon='calendar'
                            mode='outlined'
                            onPress={showDatepicker}
                            >Unesite datum</Button>
                        </View>
                </View>
        </PaperProvider>

    )
}

const Stack = createStackNavigator()

export default function IzmjenaNav({ route }) {
    return (
            <Stack.Navigator
                initialRouteName='Izmjena'
                screenOptions={{
                    headerShown: false
                }}
                >
                <Stack.Screen
                 name='Izmjena' 
                 component={Izmjena} 
                 />
            </Stack.Navigator>

    )

}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    textCon: {
        height: '0%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    inputCon: {
        height: '10%',
        justifyContent: 'center',
        alignItems: 'center'
    },  
    inputIme: {
        width: '90%',
    },
    inputOpis: {
        width: '90%',
    },
    buttonCon: {
        height: '10%',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    surface: {
        padding: 8,
        height: 200,
        width: 200,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 4,
      },
    text: {
        fontSize: 20,
        fontWeight: '600'
    },
    pickerCon: {
        justifyContent: 'center',
        alignContent: 'center',
        width: '90%',
    },
})


16:47
Object {
  "key": "Izmjena-pmv57HnUa",
  "name": "Izmjena",
  "params": undefined,
}

Как это исправить? Это очень важно иметь Stack Navigator, так как мне нужно обрабатывать некоторые данные и перемещаться по экрану.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...