Question

在下面的代码中，当您单击按钮时，弹出警报并关闭键盘。有没有一种方法可以在React Native中发出警报而不关闭键盘？

https://snack.expo.io/Hywcjv7WL

import * as React from "react";
import { Alert, TextInput, View, Button, StyleSheet } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          autoFocus={true}
        />
        <Button
          title="Press Me"
          onPress={() => {
            Alert.alert("Hello")
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 40
  },
  input: {
    padding: 10,
    borderWidth: 1
  }
});

Answer 1

我认为您可以使用ref以编程方式进行操作。

<TextInput
    style={styles.textInput}
    ref={ref => this.textInputRef = ref}
    placeholder="Quiz Deck Title"
    autoFocus={true}
    value={this.state.title}
    onChangeText={(title) => this.controlledTextInput(title)}
/>

然后，您可以使用this.textInputRef.focus()并在取消警报消息后触发此操作。

实际上，您也可以通过使用此代码来触发此操作。

Alert.alert(
  'Alert Title',
  'My Alert Msg',
  [
    {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel',
    },
    {text: 'OK', onPress: () => console.log('OK Pressed')},
  ],
  {cancelable: false},
);

在React Native中发出警报而不会关闭键盘

1 个答案: