陣營原住民 - 製作背景圖像避免鍵盤

我有一個用於頁面的「全屏」背景圖片：陣營原住民 - 製作背景圖像避免鍵盤

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

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

然而，正如你可能會注意到，輕敲文本輸入將打開鍵盤並且視圖的高度改變。由於圖像設置爲遮蓋，因此也會隨着視圖的尺寸更改而進行調整。我希望父視圖的高度和<Image>不受鍵盤的影響，只有<Image>的內容應該通過鍵盤上推。

我知道有一個<KeyboardAvoidingView>可用，但我不知道如何使用它或甚至處理這種情況。

任何想法都會很棒。謝謝。

來源

2017-02-22 Derek 朕會功夫

爲什麼'''寬度：空， height：null''' –

@PramendraGupta http://stackoverflow.com/a/32428956/283863 –

它不是很清楚你的例子多少，但你有沒有嘗試'''zIndex'''而不是把<圖像總是在後臺？ –

我加

android:windowSoftInputMode="adjustPan"

我AndroidManifest.xml它完美地工作了 - 的觀點沒有得到收縮和文本輸入得到推升。

來源

2017-02-22 07:27:30

下面是我遇到的同樣問題的解決方案。正如你所說，你可以使用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', 
}

來源

2017-02-22 07:35:32 eden

陣營原住民 - 製作背景圖像避免鍵盤

回答

相關問題