onfocus输入时，更改按钮的颜色

Question

早上好，我尝试了一个带有反应的简单组件，该组件在onfocus（）时更改按钮的颜色。我找不到如何更改颜色。这是我的组成部分。你有什么想法吗？

       import React, {Component} from 'react';
       import {
       StyleSheet,Text, View, Button,
      } from 'react-native';
     export default class App extends Component {
     render() {
     return (
    <View style={styles.inputContainer}>
      <TextInput
        maxHeight={200}

        style={styles.textInput}
        ref={(r) => {
          this.textInputRef = r;
        }}
        placeholder={'Message'}
        underlineColorAndroid="transparent"
        onFocus={()=>{/*Here i awant to change the color of Button }}
        testID={'input'}
      />
     <Button color="transparent" id="ScanButton"
        onPress={() => this.setState({text: 'Placeholder Text'})}
        title="Scan Barcode"
      />
    </View>

）}

Answer 1

首先初始化变量

constructor(props) {
        super(props);
        this.state = {
            isFocus: false
        }
    }

在您的textInput中添加两个props onfocus（）和onblur（）

 <TextInput
        maxHeight={200}
        style={styles.textInput}
        ref={(r) => {
          this.textInputRef = r;
        }}
        placeholder={'Message'}
        underlineColorAndroid="transparent"
        onBlur={() => this.onBlur()}
        onFocus={() => this.onFocus()}
        testID={'input'}
      />

在您的班级中添加两种方法以更改状态

 onFocus() {
        this.setState({
            isFocus: true
        })
    }
 onBlur() {
        this.setState({
            isFocus: false
        })
    }

，您的按钮样式将就像

<Button  
       color={this.state.isFocus ? 'red' : 'green'}
        id="ScanButton"
        onPress={() => this.setState({text: 'Placeholder Text'})}
        title="Scan Barcode"
      />

Answer 2

 style={{color: this.props.focused ? '#8B327C' :'#3F8B99'}}

尝试这样的东西