reactjs - 在本机反应中，文本隐藏在键盘下

Question

嗨，我正在应用程序中创建一个聊天部分，但是当键盘打开时，我的消息显示在键盘下方，它不会将消息推送到键盘上方。我尝试了keyBoardAvoidingView但它对我不起作用。我也尝试在清单活动中使用android:windowSoftInputMode="adjustResize"但没有任何反应..

    <View style={styles.container}>
      {loading == true ? (
        <View style={{marginVertical: hp('45%')}}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      ) : (
        <View
          style={{flex:1}}
        >
          <SafeAreaView>
            <View style={styles.arrowBack}>
              <TouchableOpacity
                onPress={() => navigation.goBack()}
                style={styles.backIcon}>
                <Image source={require('../../images/back.png')} />
              </TouchableOpacity>
              <View style={styles.profileWrapper}>
                <View style={styles.profileContent}>
                  <Text style={styles.profiletitle}>{item.name}</Text>
                  <Text style={styles.profileaddress}>{item.address}</Text>
                </View>
              </View>
            </View>
          </SafeAreaView>
          <View
            style={{
              backgroundColor: '#fff',
              height: hp('90%'),
              borderTopLeftRadius: 40,
              borderTopRightRadius: 40,
              flex:1,justifyContent:'flex-end'
            }}>
            <View>
            
                <ScrollView style={{width:'100%', flexGrow:1}} 
                ref={scrollRef}
                >
                  <KeyboardAvoidingView
                    behavior={Platform.OS === 'ios'? 'padding':null}
                  >
                    <View style={{paddingTop:20, paddingHorizontal:20, paddingBottom:20, }} >
                      
                      {
                        dataPrev()
                      }
                      </View> 
                      <View>
                        {newMsgs()}
                      </View>
                    </KeyboardAvoidingView>

                </ScrollView>
               
            </View>
          </View>
        </View>
      )}
      <View style={{
        flexDirection:'row',
        borderBottomWidth:1, borderColor:colors.primary,
        backgroundColor:'white' 
      }} >
        <TouchableOpacity  style={{width:'90%', }} >
          <TextInput 
            placeholder="Type a message"
            defaultValue={buyerMsg}  
            onChangeText={buyerMsg => setBuyerMsg(buyerMsg)}

           />
        </TouchableOpacity>
        <View style={{width:'20%', alignContent:'center', alignSelf:'center'}} >
          <SendSvg  onPress={()=>{sendmessage()}} />
        </View>
        
      </View>
    </View>

我该怎么做才能将消息推送到键盘上方？我尝试使用keyboardavoidingView，但对我不起作用。

标签： reactjsreact-nativereact-hooksscrollview

Answer 1

试试KeyboardAwareScrollView

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>