0

Проблема в том, что не получается реализовать ре-рендер компонента в зависимости от значени "value". Не знаю, как решить эту проблемы. Заранее спасибо за Ваши ответы.

Компоненты и логика:

import React, { useState, useRef } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import styled from 'styled-components';
import { Picker } from '@react-native-picker/picker';

const ReqestBuildScreen = ({ navigation }) => {
    function PickRenderLogic() {
        if (value === 1) {
            return (
                <View>
                    <Text>TEST TEXT 1</Text>
                </View>
            )
        }
        else {
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 2</Text>
                </View>
            )
        }
    }

    const [selectedForm, setSelectedForm] = useState();

    const pickerRef = useRef();

    function openPicker() {
        pickerRef.current.focus();
    }

    function closePicker() {
        pickerRef.current.blur();
    }
    return (
        <View style={{ flex: 1, padding: 20 }}>
            <Text>Select request type</Text>
            <TouchableView>
                <PickerStyled
                    dropdownIconColor='black'
                    mode='dropdown'
                    selectedValue={selectedForm}
                    onValueChange={(itemValue) =>
                        setSelectedForm(itemValue)
                    }>
                    <Picker.Item label="Bug" value={1}>
                    </Picker.Item>
                    <Picker.Item label="Bug from request" value={2} >
                    </Picker.Item>
                </PickerStyled>
            </TouchableView>
            <PickRenderLogic />
        </View>
    )
}

const PickerStyled = styled.Picker`
    background-color: red;
    border-style: solid;
    border-width: 3px;
   
`;

const TouchableView = styled.TouchableOpacity`
    flex: 0.1;
    border-width: 2px;
    border-style: solid;
    border-color: #DCDCDC;
`;

export default ReqestBuildScreen;

2 ответа 2

0

Если будут ошибки, добавьте их в комменты и я переделаю код

import React, { useState, useRef, useCallback } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import styled from 'styled-components';
import { Picker } from '@react-native-picker/picker';

const PickRenderLogic = ({value}) => {
        if (value === 1) {
            return (
                <View>
                    <Text>TEST TEXT 1</Text>
                </View>
            )
        }
        else {
            return (
                <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                    <Text>TEST TEXT 2</Text>
                </View>
            )
        }
    }

const ReqestBuildScreen = ({ navigation }) => {
    

    const [selectedForm, setSelectedForm] = useState();

    const pickerRef = useRef();

    function openPicker() {
        pickerRef.current.focus();
    }

    function closePicker() {
        pickerRef.current.blur();
    }
    return (
        <View style={{ flex: 1, padding: 20 }}>
            <Text>Select request type</Text>
            <TouchableView>
                <PickerStyled
                    dropdownIconColor='black'
                    mode='dropdown'
                    selectedValue={selectedForm}
                    onValueChange={(itemValue) =>
                        setSelectedForm(itemValue)
                    }>
                    <Picker.Item label="Bug" value={1}>
                    </Picker.Item>
                    <Picker.Item label="Bug from request" value={2} >
                    </Picker.Item>
                </PickerStyled>
            </TouchableView>
            <PickRenderLogic value={selectedForm} />
        </View>
    )
}

const PickerStyled = styled.Picker`
    background-color: red;
    border-style: solid;
    border-width: 3px;
   
`;

const TouchableView = styled.TouchableOpacity`
    flex: 0.1;
    border-width: 2px;
    border-style: solid;
    border-color: #DCDCDC;
`;

export default ReqestBuildScreen;

0

Проблема решалась помещением значения selectedForm в указаный кусок кода.

    const ReqestBuildScreen = ({ navigation }) => {
function PickRenderLogic() {
    if (selectedForm === 1) {
        return (
            <View>
                <Text>TEST TEXT 1</Text>
            </View>
        )
    }
    if (selectedForm === 2)
        return (
            <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
                <Text>TEST TEXT 2</Text>
            </View>
        )
    else {
        return (
            <View/>
        )
    }
}

const [selectedForm, setSelectedForm] = useState();

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.