如何使用react-native在数字小键盘上添加“完成”按钮

Question

我在反应本机中使用数字键盘，我想在单击完成按钮时隐藏键盘，为此我想在键盘上方添加完成按钮，有没有可能像IOS应用程序一样隐藏键盘，任何帮助非常感激

Answer 1

returnKeyLabel - 按钮的文本是什么。

onSubmitEditing - 单击操作。Keyboard.dismiss在这里关闭键盘。

<TextInput 
  returnKeyLabel='Done' 
  returnKeyType='done' 
  onSubmitEditing={Keyboard.dismiss} />

Answer 2

React Native v.632021年使用

• 如果你只是使用它returnKeyType='done'会自动隐藏键盘
• 请注意，您还可以使用自己的函数onSubmitEditing={() => yourFunctionNameHere()}

这对我有用=>

                <TextInput
                  style={styles.textBox}
                  maxLength={5}
                  placeholder="Enter Zip Code"
                  placeholderTextColor={'#6D7376'}
                  autoCompleteType="postal-code"
                  keyboardType="number-pad"
                  returnKeyType="done"
                  onChangeText={text => setZip(text)}
                  onSubmitEditing={() => yourFunctionNameHere()}
                />

这是直接文档 https://reactnative.dev/docs/textinput#returnkeytype

Answer 3

我不确定这是否正是您想要的，但是您可以使用prop returnKeyType向键盘添加“完成”按钮。

例如： returnKeyType={ 'done' }

更多信息在这里https://facebook.github.io/react-native/docs/textinput.html#returnkeytype