Question

我有一个带有数字键盘的本机TextInput，它工作正常，只是在单击提交按钮后键盘再次出现并导航到下一页（ShouldNotHaveKeyboardScreen）。下一页没有文本输入，键盘永远不会显示在该页面上。我想确保键盘不会在下一个屏幕上显示，但我无法弄清楚如何操作。我尝试在提交textInput时关闭键盘，但这并不起作用。我还试图在下一个屏幕上加载时忽略它，但这也不能完全发挥作用。我能做的最好的就是在它弹出后隐藏它，但这并不理想，我希望它永远不会显示出来。

我正在使用一个带有react-native v0.48.3的Android设备（Android v.6.0.1）。

以下是代码，我试图删除任何不相关的部分。

// The screen that should not have keyboard

import { Keyboard } from 'react-native';

class ShouldNotHaveKeyboardScreen extends Component {
  componentDidMount() {
    Keyboard.dismiss();  // < that doesn't seem to work
    Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);

  }
  componentWillUnmount() {
    Keyboard.removeListener('keyboardDidShow', this._keyboardDidShow);
  }

  _keyboardDidShow()  {
    console.warn("keyboard did show");
    Keyboard.dismiss();  //  < this works, but the keyboard pops up first
  }

  // other stuff
}


// The screen with numeric text input
class TextInputScreen extends Component {
  componentDidMount() {
    Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    Keyboard.removeListener('keyboardDidHide', this._keyboardDidHide);
  }

  _keyboardDidHide() {
    console.warn("keyboard did hide oh yeah");
    Keyboard.dismiss();  // This doesn't help, the event happens but the next screen still shows keyboard
  }

  handleSendReadCommand(value) {
      // some stuff
      this.props.navigation.navigate('ShouldNotHaveKeyboardScreen');
    }
  }

  render() {
    return (
      <ScrollView style={styles.mainContainer}>
        <View style={styles.contentContainer}>
          <View style={styles.Container}>
            <View>
              <Text style={styles.Title}>Text here</Text>
              <ColoredTextInput inFocus={true}
                                value={this.props.setting_id}
                                returnKey={"search"}
                                onChangeText={(text) => { someAction(text)}}
                                onSubmitEditing={(event) => { 
                                  Keyboard.dismiss();  // This doesn't help
                                  this.handleSendReadCommand(event.nativeEvent.text)}}
              />  
            </View>
          </View>
        </View>
      </ScrollView>
    );
  }
}

// numeric text input component
export default class ColoredTextInput extends Component {

  constructor(props) {
    super(props);
    this.state = {style: props.inFocus ? styles.text_input_in_focus : styles.text_input_not_focused};
    this.onFocus = () => this.setState({ style: styles.text_input_in_focus });
    this.onBlur = () => this.setState({ style: styles.text_input_not_focused });
  }

  static propTypes = {
    inFocus: PropTypes.bool.isRequired,
    onChangeText: PropTypes.func,
    onSubmitEditing: PropTypes.func,
    returnKey: PropTypes.string,
  };

  render() {
    let return_key = 'done';
    if (this.props.returnKey) {
      return_key = this.props.returnKey;
    }
    return (
      <TextInput
        style={[styles.text_input, this.state.style]}
        autoFocus={this.props.inFocus}
        returnKeyType={return_key}
        keyboardType="numeric"
        underlineColorAndroid="transparent"
        onBlur={() => this.onBlur()}
        onFocus={() => this.onFocus()}
        value={this.props.value}
        onChangeText={ this.props.onChangeText }
        onSubmitEditing={ this.props.onSubmitEditing }
      />
    );
  }
}

如何隐藏键盘？

如何防止在导航后在Android上显示数字键盘 - 对原生TextInput进行反应

0 个答案: