React Native - Redux or Context API, how and why?

Asked

Viewed 35 times

1

Hello, my code he needs to send a text to another screen, according to the checkbox that is marked. The message that should be sent to another screen must be the one in which had the highest "grade" checkbox. For example: if the checkbox of grade 3 is triggered and grade 2 is also triggered, the message to be displayed on the other screen must be that of grade 3. I have read Redux, but I got confused in the understanding and read about context api also. Right now I don’t know which of the two libs to use. Can anyone help me?

import React from ''react'';
import { StyleSheet ,View, Text, TouchableOpacity, ScrollView } from ''react-native'';

import MyCheckBox from ''../../../components/mycheckbox'';

function Distancia({ navigation }){

    return (
        <ScrollView contentContainerStyle={styles.scrollViewStyle}>
            <Text style={styles.textPage}>Avalie:</Text>
            <MyCheckBox grau={''3''} label={''Muito longe''} />
            <MyCheckBox grau={''3''} label={"Longe"} />
            <MyCheckBox grau={''3''} label={"Distante"} />
            <MyCheckBox grau={''2''} label={"Metade do caminho"} />
            <MyCheckBox grau={''1''} label={"Perto} />
            <View style={styles.viewButton}>           
                <TouchableOpacity 
                    style={styles.goButton}
                    onPress={() => { 
                        if(grau==3){
                            navigation.navigate(''Classificacao'', {
                                risco:''Não vale a pena'',
                                corBackground: ''#fa5858'',
                                corLetra:''#fff''
                            });
                        }
                        if(grau==2){
                            navigation.navigate(''Classificacao'', {
                                risco:''Pode tentar'',
                                corBackground: ''#f4fa58'',
                                corLetra:''#000''
                            });
                        }
                        if(grau==1){
                            navigation.navigate(''Classificacao'', {
                                risco:''Vale a pena'',
                                corBackground: ''#81f781'',
                                corLetra: ''#000''
                            });
                        }else{
                        }
                    }} 
                >                    
                    <Text style={styles.textButton}>Resultado</Text>
                </TouchableOpacity>
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({...});

export default Distancia;
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.