本机反应，如何删除旧样式并添加新样式

Question

我希望删除View上的旧样式(InputContainer)，并在调用onPress时设置新样式(InputContainer)。

此源添加新样式，但如何删除旧样式？

showNext = (id) => {
  this.refs["block-" + id].setNativeProps({
    style: styles.Hidden
  });
  id++;
  this.refs["block-" + id].setNativeProps({
    style: styles.InputContainer
  });
}

render() {
  return (
    <KeyboardAvoidingView style={[styles.Container]}>

      <View style={styles.InputContainer} id="block-1" ref="block-1">       
        <Text>Block 1</Text>
        <DefaultButton onPress={() => this.showNext(1)}>Ok</DefaultButton>
      </View>

      <View style={styles.Hidden} id="block-2" ref="block-2">       
        <Text>Block 2</Text>
      </View>

    </KeyboardAvoidingView>
  )
}

风格

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  Hidden: {
    display: "none"
  },
  InputContainer: {
    width: "80%"
  }
});

Answer 1

我想你可以做一些更简单的事情

state = {
  pressed: false
}


showNext = () => {
  this.setState({pressed: !this.state.pressed})
}

render() {
  return (
    <KeyboardAvoidingView style={[styles.Container]}>

      <View style={this.state.pressed ? styles.InputContainer : styles.Hidden} id="block-1" ref="block-1">       
        <Text>Block 1</Text>
        <DefaultButton onPress={showNext}>Ok</DefaultButton>
      </View>

      <View style={styles.Hidden} id="block-2" ref="block-2">       
        <Text>Block 2</Text>
      </View>

    </KeyboardAvoidingView>
  )
}

它还应动态地发挥作用：

showNext = (id) => {
  this.setState({[`blockPressed-${id}`]: !this.state[`blockPressed-${id}`]})
}

和

 <View style={this.state.blockPressed-1 ? stlyes.InputContainer : styles.Hidden}>       
    <Text>Block 1</Text>
    <DefaultButton onPress={() => showNext(1)}>Ok</DefaultButton>
  </View>