Изменить отображение ползунка, нажав кнопку - PullRequest
0 голосов
/ 19 февраля 2020

Я хочу изменить атрибут отображения слайдера между '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, нажав кнопку, но стиль ползунка не изменится, независимо от того, сколько раз я нажимаю кнопку. Так как я могу это исправить?

...