React Native，如何删除旧样式并添加新样式答案

【问题标题】：React Native, how to remove old style and add newReact Native，如何删除旧样式并添加新样式
【发布时间】：2018-12-13 21:31:22
【问题描述】：

我想删除 View 上的旧样式 (Hidden) 并在调用 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%"
  }
});

【问题讨论】：

标签： javascript reactjs react-native stylesheet

【解决方案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>

【讨论】：