suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die React Native-Tastatur treibt alles nach oben und ich habe keine Kontrolle

Bei geöffneter Tastatur möchte ich nur, dass die Kommentareingabe nach oben wandert, aber alles wandert nach oben

export default function DetailsPage({ route, navigation }) {
  const { title, detail, degree } = route.params;
  const [comment, setComment] = useState("")
  return (
    <ScrollView style={{flex:1}}>
    <View style={{ height: responsiveHeight(100), paddingTop: StatusBar.currentHeight }} >
    
      <ImageBackground blurRadius={0} source={require('../assets/bgg.jpg')} resizeMode="cover" >
        <View style={{ height: responsiveHeight(35), borderWidth: 1 }}>
          <View style={{ width: responsiveWidth(80), height: responsiveHeight(15), justifyContent: 'space-around', alignSelf: 'center', marginTop: 40 }}>
            <Text style={{ fontFamily: 'Inter-Bold', fontSize: 18 }}>Example</Text>
            <Text numberOfLines={3} style={{ fontFamily: 'Roboto-Medium' }}></Text>
          </View>
        </View>
      </ImageBackground>


      <View style={{ paddingHorizontal: responsiveWidth(10), paddingVertical: responsiveWidth(10), height: responsiveHeight(65), borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, marginTop: -responsiveHeight(10), backgroundColor: 'white' }}>
        <View style={{ height: responsiveHeight(50), borderWidth: 1 }}>
          <CommentCard></CommentCard>
        </View>
      </View>
      
      <KeyboardAvoidingView >
        <View style={{height:responsiveHeight(10),backgroundColor:'white'}}>
          <InputComp></InputComp>
        </View>
      </KeyboardAvoidingView>
      
    </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Ich habe die Lösung „softwareKeyboardLayoutMode“: „pan“ ausprobiert Ich habe KeyboardAvoidingView und KeyboardVerticalOffset überall ausprobiert, kann aber keine Lösung finden Ich habe versucht, die Scroll-Ansicht zu vermeiden und die Ansicht mit oder ohne Tastatur zu vermeiden

P粉466643318P粉466643318234 Tage vor447

Antworte allen(1)Ich werde antworten

  • P粉801904089

    P粉8019040892024-03-31 10:52:01

    您可以尝试在代码中添加这三件事。

    1. 在 InputComp 组件周围添加一个 KeyboardAvoidingView。

    2. 将 KeyboardAvoidingView 的行为属性设置为“padding”。

    3. 将 KeyboardAvoidingView 的样式属性设置为 {height: 响应式高度(10),背景颜色:'白色'}。

      export default function DetailsPage({ route, navigation }) {
      const { title, detail, degree } = route.params;
      const [comment, setComment] = useState("")
      return (
      
      
            
      
        
          Example
          
        
        
        
        
          
            
          
        
      
        
          
        
      
      
      
      );
      }
      
        const styles = StyleSheet.create({
        container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
      });

    Antwort
    0
  • StornierenAntwort