通过点击它来模糊<textinput>,在本机反应中不起作用

时间:2018-05-07 09:55:42

标签: javascript reactjs react-native

我有<TextInput/>我希望能够模糊它并在<TextInput/>我尝试this解决方案之外点击时切换键盘,但没有任何运气。

import React, { Component } from 'react'; import { AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View, Image, TextInput, ScrollView, Keyboard, TouchableWithoutFeedback } from 'react-native'; import { Button } from 'react-native-elements'; class CounterextendsComponent {

  render() {
    return (
      <View
        style={styles.container}
        onPress={this.focusOff}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
          <View>
            <TextInput
              ref="numberInput"
              id={this.props.id}
              style={styles.title}
              keyboardType='numeric'
              maxLength={2}
              value={this.state.keys.toString()}
              onChange={(event) => this.updateKeysWithInputHandler(event.nativeEvent.text)}
            />
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:4)

您需要将dimensions / flex父容器传递给TouchableWithoutFeedback才能生效。

假设您flex: 1中有styles.container,请添加

<TouchableWithoutFeedback style={{flex: 1}} onPress={Keyboard.dismiss} accessible={false}>

到您的子组件,以便继承flex