Реагировать Native - Создание фонового изображения ИЗБЕЖАТЬ клавиатуру

Question

У меня есть «полноэкранный режим» фоновое изображение, которое используется для страницы:

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

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

Однако, как вы можете заметить, нажав на вводе текста откроется клавиатура и высота просмотра изменяется. Поскольку изображение настроено на обложку, оно также регулируется по мере изменения размера представления. Я хочу, чтобы высота родительского вида и <Image> не пострадали от клавиатуры, и только содержимое <Image> должно быть выдвинуто клавиатурой.

Я знаю, что есть <KeyboardAvoidingView>, но я не уверен, как его использовать или он даже справляется с этой ситуацией.

Любые идеи были бы замечательными. Благодарю.

Answer 1

Я добавил

android:windowSoftInputMode="adjustPan" 

к моему AndroidManifest.xml, и она работала отлично - вид не получает усаживается и текстовые входы получили толкнул вверх.

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', 
}