ReactNative[IOS] can't hide keyboard by clicking blank position

Keywords: iOS Android

Recently, in the requirements of the development project, the test students raised a bug. In the following page, there are three input boxes. On iOS phones, after input, the keyboard cannot be hidden; on Android phones, the keyboard has a stow button, so there is no such problem.

Solutions in mind:
1. Let the input box lose focus,
2. Click the blank position in the background, listen to the Keyboard keyboard event, and call the dismiss() method to hide the soft Keyboard.
All of the above two schemes need to write a pile of code. Suddenly, I thought of the similar page requirements before. After review ing the code, I found that it only needs to add a Scrollview in the outermost layout.

<ScrollView style={{flex: 1}}>
                    <View style={styles.container}>
                        ... Other code
                        <View style={{
                            marginTop: 17,
                            height: 300,
                            paddingHorizontal: 12,
                            paddingTop: 12,
                            paddingBottom: 24,
                            width: deviceWidth - 24,
                            backgroundColor: '#F9F9FB',
                            marginHorizontal: 12
                        }}>
                            <TextInput
                                style={{padding: 0}}
                                multiline={true}
                                maxLength={800}
                                textAlignVertical={'top'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'Please fill in your questions or suggestions'}
                                value={this.state}
                                placeholderTextColor={'#999999'}
                                onChangeText={(text) => this.setState({
                                    text
                                })}
                            />
                        </View>

                    </View>
                </ScrollView>

Welcome to personal public address: Junwei said.

Posted by evanesq on Sat, 07 Dec 2019 06:56:36 -0800