키보드 회피 Scroll View를 사용한 표시 회피

키보드 회피 Scroll View를 사용한 표시 회피

네이티브 대응은 처음이지만 네이티브 대응 문서에서는 찾을 수 없었던 질문이 하나 있습니다.

이 컴포넌트를 조사하고 있습니다.KeyboardAvoidingView: https://facebook.github.io/react-native/docs/keyboardavoidingview.html

질문은 간단합니다.문의할 사람이 있습니까?KeyboardAvoidingView잘 어울리다ScrollView나는 많은 것을 가지고 있다.TextInputs1개의 컴포넌트(Text Inputs 높이의 합계가 디바이스 높이보다 크다)에서 키보드가 뜨면 여러 가지 문제가 발생합니다.
사용하는 경우View대신ScrollView그럼 다 괜찮은데, 기기 높이보다 공간이 더 필요해서 못 쓰겠어.스크롤에 대한 정보를 찾을 수 없습니다.KeyboardAvoidingView문서를 참조해 주세요.

감사해요.

이것이 저의 솔루션입니다.포커스 입력 시 자동으로 동작하고 스크롤됩니다.엑스포 때 해봤어요.

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
            //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>

나도 인터넷에서 해결책을 찾으려고 노력했지만, 스스로 알아냈어.나는 할 수 있었다.keyboardAvoidingView함께 일하다ScrollView아이폰 SE 시뮬레이터에 있습니다.

패딩 타입을 사용했습니다.position,와 함께keyboardVerticalOffset더 높은 값으로 설정합니다.나는 이것이 이 상황에 처한 모든 사람들에게 도움이 되기를 바란다.

render() {
  return (
    <View style={...}>
      <ScrollView>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          keyboardVerticalOffset={100}
          behavior={"position"}
        >
          <TextInput style={styles.editInput} ... />
        </KeyboardAvoidingView>
      </ScrollView>
    </View>
  );
}

facebook은 아직 scrollViews 솔루션을 구현하지 않은 것 같습니다.하지만 Wix가 만든 솔루션, 즉 반응 네이티브 키보드 인식 스크롤 뷰는 정상적으로 동작합니다.

npm i react-native-keyboard-aware-scrollview --save

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scrollview';

<KeyboardAwareScrollView style={styles.container}>
  <TextInput style={styles.textInput} placeholder={'My Input'} />
</KeyboardAwareScrollView>

<View style={{flex:1}}>
   <KeyboardAvoidingView
     style={{flex:1}}
     behavior={Platform.OS === 'ios' ? 'position' : null}
     keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
   >
    <ScrollView> // no need to put here style={{flex:1}}
      <TextInput />
      <TextInput />
      <TextInput />
      <TextInput />
    </ScrollView>
  </KeyboardAvoidingView>
</View>

제 경우 https://github.com/APSL/react-native-keyboard-aware-scroll-view을 사용했습니다.

<KeyboardAwareScrollView>
  ....
  <MyContainerComponent>
    ....
    <MyFormComponentWithInputs />
  </MyContainerComponent>
</KeyboardAwareScrollView>

오래된 RN 버전도 지원합니다.

텍스트 입력은 ScrollView의 일부 커스텀 아이 컴포넌트 깊은 곳에 숨겨져 있었지만, 패키지는 Android와 iOS 모두에서 훌륭하게 동작했습니다.

아래 코드로 문제가 해결되었습니다.

<KeyboardAvoidingView 
  style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}}
  behavior={Platform.OS == "ios" ? "padding" : "height"} 
  keyboardVerticalOffset={150}
  enabled>
     {renderForm()}  // renderForm render the long form with ScrollView
</KeyboardAvoidingView>

나 또한 이 문제에 직면해 있었고, 이 문제를 해결하고 마지막으로 이 해결책을 찾기 위해 4시간 이상을 소비했다.

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}} behavior="position" enabled   keyboardVerticalOffset={200}>
<ScrollView>
  <Text style={{padding:10,fontSize:42}}>Text 1</Text>
  <Text style={{padding:10,fontSize:42}}>Text 2</Text>
  <Text style={{padding:10,fontSize:42}}>Text 3</Text>
  <Text style={{padding:10,fontSize:42}}>Text 4</Text>
  <Text style={{padding:10,fontSize:42}}>Text 5</Text>
  <Text style={{padding:10,fontSize:42}}>Text 6</Text>
  <Text style={{padding:10,fontSize:42}}>Text 7</Text>
  <Text style={{padding:10,fontSize:42}}>Text 8</Text>
  <Text style={{padding:10,fontSize:42}}>Text 9</Text>
  <Text style={{padding:10,fontSize:42}}>Text 10</Text>
  <Text style={{padding:10,fontSize:42}}>Text 11</Text>
  <Text style={{padding:10,fontSize:42}}>Text 12</Text>
  <TextInput style={styles.input}
    placeholder="Type some text...">
  </TextInput>
  </ScrollView>
</KeyboardAvoidingView>

수많은 시도 끝에 iOS와 Android 모두에서 잘 작동합니다.

<KeyboardAvoidingView
    style={styles.keyboard}
    behavior={Platform.OS == "ios" ? "padding" : "height"}
    enabled
    keyboardVerticalOffset={10}
>
   <ScrollView>
   ...
   </ScrollView>
</KeyboardAvoidingView>

스타일에 대해서:

const styles = StyleSheet.create({
   keyboard: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
   }
});

같은 문제에 부딪혔습니다만, 기본적으로 키보드가 표시되었을 때 뷰의 위치를 계산하고(translateY를 사용하여) 배치하는 방법은 달랐습니다.

저는 Github과 NPM 반응-네이티브 스페이서에 용액을 게재했습니다.

나는 이틀 동안 적절한 해결책을 찾기 위해 노력했고 마침내 그것을 발견했다.

<KeyboardAvoidingView
     style={{flex:1 }}
     keyboardVerticalOffset={40 }
     behavior={Platform.OS === "ios" ? "padding" : null}
   >
   <ScrollView >
  ….. .. . .
   …
   </ScrollView>
  </KeyboardAvoidingView>

TextInput은 여러 줄의 TextInput에서는 동작하지 않기 때문에 특별히 주의를 기울이면 됩니다.그 때문에, 솔루션은 다음과 같습니다.

<TextInput  
   multiline={true}
   scrollEnabled={false}
  />

이것이 당신에게 도움이 되고 당신의 시간을 절약하기를 바랍니다.

아이폰13 시뮬레이터, 안드로이드 픽셀2, 아이폰8 기기로 몇 시간을 보냈습니다.해결책은 다음과 같습니다.

<SafeAreaView style={{ flex: 1 }}>
   <Button />
 <Text />

  <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : null}  keyboardVerticalOffset={50} style={{ flex: 1 }}>
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <ScrollView>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Button />
        </View>
        <Text> </Text>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TextInput />
          <TextInput />
          <TextInput />
          <TextInput />
        </View>

        <TextInput />

        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <TextInput />
          <TextInput />
          <TextInput />
        </View>
        <TextInput />
      </ScrollView>
    </TouchableWithoutFeedback>
  </KeyboardAvoidingView>
  <Button />
</SafeAreaView>

또한.

키보드 수직 오프셋={100}

는 iOS 디바이스에서는 동작하지 않습니다.단추 위 스크롤 뷰 하단의 빈 뷰는 그대로 두기 때문에 Scroll View 내에서 버튼을 이동해도 도움이 되지 않습니다.

ios 플랫폼에서는 완벽한 동작이 아닙니다.KeyboardAwareScrollView 대신 KeyboardAwareScrollView를 사용합니다.

언급URL : https://stackoverflow.com/questions/40438986/keyboardavoidingview-with-scrollview