javascript 改变风格作为React Native的状态变化

Posted 2021-05-03

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  View,
} = React;

var SampleApp = React.createClass({
 getInitialState: function () {
    return { toggle: false };
  },
   
  render: function() {
    return (
      <View style={styles.container}>
         <TextInput 
          style={[styles.textInput, this.state.toggle && styles.textInputAlt]}  
        /> 
        <TouchableHighlight
          onPress={()=> this.setState({toggle: !this.state.toggle})}
          style={styles.button}>
          <Text style={styles.buttonText}>
            Go
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',

  },
  textInput: {
    borderColor: '#000',
    borderWidth: 2.0,
    backgroundColor: '#fff',
    height: 40,
    marginLeft: 60,
    marginRight: 60,
    marginBottom: 30,
    padding: 2,
  },
  textInputAlt: {
    borderColor: '#e71636',
  },
  button: {
    height: 50,
    backgroundColor: '#48bbec',
    alignSelf: 'stretch',
    marginTop: 10,
    marginLeft: 60,
    marginRight: 60,
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 22,
    color: '#FFF',
    alignSelf: 'center'
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);