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();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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