Question

我想动态地改变背景图像。我试图通过这种方式知道TextInput是否聚焦。我也尝试了this.text.current.isFocused()。但这对我没有帮助。有人知道吗？

text={};


renderDrawerContent(){
  let  image = this.text.isFocused() ?  require('../assets/images/gyzyl.png') : require('../assets/images/BlackBack.jpg');
        return(
            <Container style={styles.containerDrawer}>
               <ImageBackground
                source={image}
                style={{flex:1}}
                resizeMode={'cover'}
                 >

                   <Content style={{ paddingTop: 0, }}>
                       <View style={{paddingTop: 20}}>
                           <View style={{flexDirection:'column' , marginVertical:5 ,padding:15}}>
                               <Text style={styles.search}>Search</Text>
                               <TextInput ref={ref => this.text=ref} autotFocus={this.state.Focused} underlineColorAndroid={'white'} placeholder='Cinema, Theatre, Concert ...' placeholderTextColor = '#fff' style={{color: '#fff', fontSize: 16 ,flex:1 , borderBottomColor: '#fff'}} />
                           </View>
                       </View>

                   </Content>


                </ImageBackground>
            </Container>

        );
}

Answer 1

您可以将textinput中的onFocus事件与onBlur一起使用。使用此方法，您应该在状态对象中添加一个值，该值可以跟踪输入是否为焦点。

<TextInput onFocus={()=> this.setState({inputFocused: true})} onBlur={()=> this.setState({inputFocused: false})}/>

然后仅使用输入焦点即可检查输入是否集中

反应原生TextInput isFocused方法

1 个答案: