Проблема с использованием KeyBoard, избегая просмотра в Overlay - PullRequest
0 голосов
/ 26 мая 2020

Может ли кто-нибудь помочь мне с этой проблемой На самом деле я новичок в React Native Я пробовал несколько способов решить эту проблему, но ничего не вышло, пожалуйста, помогите мне с этим Я не хочу, чтобы клавиатура мешала наложению

enter image description here enter image description here

            <View style={{height:"9%"}}>

                <Button title="Add A New ToDO" onPress={this.onPressOpenOverLay}  buttonStyle={{height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30}}/>

                <Overlay isVisible={this.state.setVisible} 
                onBackdropPress={this.onPressCloseOverLay} 
                animationType="fade" 
                overlayStyle={{height:"70%",width:"90%",borderRadius:20,alignItems:"center",paddingTop:"15%"}}>

                        <Text style={{fontSize:19,color:"#0288D1",fontWeight:"bold"}}>Add A New ToDo</Text>

                        <TextInput style={styles.input} 
                            placeholder="Email ID"
                            autoCapitalize="none" 
                            underlineColorAndroid="transparent"
                            onChangeText={email => this.setState({ email })}
                            value={this.state.email}
                            >

                        </TextInput>

                </Overlay>


            </View>

            <FlatList

                style={{marginTop:"2%"}}
                data={this.state.data}
                renderItem={this._renderMyList}
               keyExtractor={(item, index) => index.toString()}
               bounces={true}

            />

            </SafeAreaView>
    )
}

}

1 Ответ

1 голос
/ 26 мая 2020

Если вы устанавливаете ширину или высоту в процентах, они могут измениться, когда происходят некоторые изменения в макете пользовательского интерфейса, такие как появление клавиатуры. поэтому вам нужно дать им значения в пикселях. Более того, вы можете использовать import {Dimension} from 'react-native', чтобы указать ширину и высоту устройства, а затем вычислить процент этих значений и передать их вашему представлению.

...