Проблема в том, что не получается реализовать ре-рендер компонента в зависимости от значени "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;