はネイティブリアクト - 私はページのために使用されている「フルスクリーン」の背景画像持つ背景画像避けるキーボード

Question

作る：あなたが気づくこととして、テキスト入力をタップすると、キーボードを開きます、しかし

container = { 
    flex: 1, 
    width: null, 
    height: null 
} 

<View ...> 
    ... 
    <Image ... styles={container}> 
     ... 
     <TextInput ... /> 
     ... 
    </Image> 
</View> 

をビューの高さが変わります。画像はカバーするように設定されているため、ビューの寸法が変わると調整されます。私は親ビューの高さと<Image>がキーボードの影響を受けないようにし、<Image>の内容だけをキーボードで押し上げる必要があります。

私は<KeyboardAvoidingView>が利用可能であることを認識していますが、それを使用する方法がわかりませんか、この状況を処理することさえあります。

いずれのアイデアも素晴らしいでしょう。ありがとう。

Answer 1

私は私のAndroidManifest.xmlに

android:windowSoftInputMode="adjustPan" 

を追加し、それは完全に働いた - ビューを縮めません。また、テキスト入力が押し上げられてしまいました。

Answer 2

ここで私が直面したのと同じ問題に私が見いだした解決法があります。あなたが言ったように、あなたはreact-native-keyboard-avoiding-viewを使用することができます。これはキーボードを避ける本当に良い方法であり、この解決策はそれを実装します。

ここにあるのは、スタイルimageStyleラッピングすべての画像です。

render() { 
    return(
    <Image source={{uri: 'blabla'}} style={imageStyle}> 
    <View style={styles.container}> 
     <KeyboardAwareScrollView> 
     <TouchableOpacity onPress={this.abc.bind(this)}> 
      <View style={styles.abc}> 
      <Text>Test</Text> 
      </View> 
     </TouchableOpacity> 
     ... 
     </KeyboardAwareScrollView> 
     ... 
    </View> 
    </Image> 
) 
} 

とimageStyle：

const imageStyle = { 
    width: Dimensions.get('window').width, 
    height: Dimensions.get('window').height, 
    resizeMode: 'stretch', 
} 

ボーナス：あなたは、画面回転をサポートしようとしている場合は、あなたが行うことができます：

const { width, height } = Dimensions.get('window') 
const imageStyle = { 
    width: width < height ? width : height, 
    height: width < height ? height : width, 
    resizeMode: 'stretch', 
}