Question

我尝试将backgroundColor中的styles container值与state: color相关联，因此背景颜色将更改为我在textInput上添加的任何颜色。这是我的代码。谢谢！

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';

export default class App extends Component {
    state = {
        color: '',
    };

    _color = (text) => {this.setState({color: text})};
    _applyAndClear = () => {
                            this.setState({color: ''})}

  render() {
    return (
      <View style={styles.container}>
        <TextInput 
            style={styles.input}
            value = {this.state.color}
            onChangeText = {this._color}
            onSubmitEditing = {this._applyAndClear}
        />  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'someColor',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 3,
    width: 100,
    height: 40,
    borderColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

Answer 1

您可以使用以下方法执行此操作：

<View style={[styles.container, { backgroundColor: this.state.color }]}>

传递状态值React Native

1 个答案: