Я хочу изменить атрибут отображения слайдера между 'flex' и 'none', нажав другую кнопку. Поэтому я пишу код, как показано ниже:
class App extends Component {
constructor(props) {
super(props);
this.state = {
pressStatus: false,
};
}
_onHideUnderlay() {
this.setState({pressStatus: false});
}
_onShowUnderlay() {
this.setState({pressStatus: true});
}
render() {
return (
<NavigationContainer>
<Fragment>
<Provider store={store}>
<Stack.Navigator>
<Stack.Screen name="Home" component={List} />
<Stack.Screen
name="Details"
component={Content}
options={{
headerTitle: 'Details',
headerRight: () => (
<Button
onPress={() => {
// alert(styles.slider.display);
// styles.slider.display = 'none';
// alert(styles.slider.display);
// alert(this.state.pressStatus);
// eslint-disable-next-line eqeqeq
if (this.state.pressStatus == false) {
this.state.pressStatus = true;
} else this.state.pressStatus = false;
alert(this.state.pressStatus);
}}
title="A"
color="#000"
style={{marginRight:10}}
/>
),
}}
/>
</Stack.Navigator>
<Slider
step={1}
maximumValue={100}
onValueChange={alert()}
value={10}
style={
this.state.pressStatus ? styles.sliderShow : styles.sliderHide
}
/>
</Provider>
</Fragment>
</NavigationContainer>
);
}
}
const styles = StyleSheet.create({
sliderShow: {
display: 'flex',
},
sliderHide: {
display: 'none',
},
});
export default App;
Я могу изменить state.pressStatus, нажав кнопку, но стиль ползунка не изменится, независимо от того, сколько раз я нажимаю кнопку. Так как я могу это исправить?