scrollViewでスクロールできません
入力フィールドに入力して、それに応じて検索結果を取得する画面があります。リストはScrollView内にレンダリングされますが、キーパッドが開いているとき（Androidの場合）はスクロールできません。
どうすればこれを修正できますか？
return (
<>
{addressesFound.length > 0 ? (
<ScrollView
style={styles.searchResultsContainer}
keyboardShouldPersistTaps={'always'}
keyboardDismissMode={'on-drag'}>
{addressesFound.map((addressDetails: addressDetailsType) => {
return (
<View
key={addressDetails.placeName}
style={styles.resultContainer}>
<Text
style={styles.text}>
{addressDetails.placeName}
</Text>
</View>
);
})}
</ScrollView>
) : null}
</>
);
};
const styles = StyleSheet.create({
searchResultsContainer: {
width: moderateScale(400),
paddingHorizontal: moderateScale(50),
paddingRight: moderateScale(65),
marginTop: moderateScale(10),
flex:1,
},
resultContainer: {
marginTop: moderateScale(10),
borderBottomWidth: 1,
borderBottomColor: 'grey',
},
text: {
fontSize: moderateScale(15),
},
});
すでにnestedScrollEnabled = {true}を追加しようとしましたが、違いはありません。
ここで、上記のコンポーネントが呼び出されます。
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList} />
....
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
flex: 1,
},
高さを追加してみました：80％をdropdown。これにより、少しスクロールすることができます。ただし、キーパッドが開いているときはスクロールできますが、最後までスクロールすることはできません。高さを100％追加すると、まったくスクロールできなくなります。
回答
私はあなたの問題のためにエキスポスナックを作り、それを調べました。私はそれを解決したと思います。それを見てください：
エキスポスナックへのリンクです
それについて説明するには：
私が知ったように、あなたの問題は、ScrollViewより多くheightを与えたり、与えたりしても、どのような状況でも高さが変わらないということpaddingBottomでした。
だから私ScrollViewはViewタグで包み、それにこのスタイリングを与えました：
scrollViewWrapper: {
width: '100%',
minHeight: '100%',
paddingBottom: 1.3*keyboardHeight
}
このスタイリングでは、パラメータを参照してくださいkeyboardHeightしている、state私は設定していますというcomponentDidMountコード以下に：
import {Keyboard} from 'react-native';
state = {
keyboardHeight: 0,
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
this._keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
this._keyboardDidHide
);
}
_keyboardDidShow = (e) => {
this.setState({
keyboardHeight: e.endCoordinates.height,
});
};
私はあなたのスタイルに移動できないことを言及する必要がありpaddingBottom: 1.3*keyboardHeight、クラスコンポーネントの外側をし、それを配置stylesするので、オブジェクトkeyboardHeightされstate、それはコンポーネント内だけで知ることができます。
私の説明をよりよく理解するために、エキスポスナックの私のコードを見てみることをお勧めします。
これで問題が解決することを願っています。
機能コンポーネントの編集
以下のコードを使用して、機能コンポーネントの作成中にキーボードの高さを検出します。
const [keyboardHeight, setKeyboardHeight] = useState(0)
const [scrollViewVisibility, setScrollViewVisibility] = useState(false)
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
// cleanup function
return () => {
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
};
}, []);
const _keyboardDidShow = (e) => {
console.log("============in keyboardDidShow")
setKeyboardHeight(e.endCoordinates.height)
};
博覧会のおやつも編集しました。あなたはそれを見て、実際の例を見ることができます。
私は3つの解決策を考えることができます（どちらかを試すことができます）：
1-次のように、flex = 1のビュータグ内にスクロールビューをラップしてみてください。
<View style={{ flex:1 }}>
<ScrollView>
</ScrollView>
</View>
2-ビューを使用したくない場合は、ScrollViewflexを1に設定できます
3-最初のソリューションでは、次のようにViewの代わりに空のタグを使用できます。
<>
</>
キーパッドを開いただけで問題が発生する場合は、KeyboardAvoidingViewを確認することをお勧めします。
私はこれに関して多くの問題を抱えています！小道具のすべての設定を試してみたいと思いますbehavior。おそらくあなたのために働くものがあります！
彼らの例から：
import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform,
TouchableWithoutFeedback, Button, Keyboard } from 'react-native';
const KeyboardAvoidingComponent = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={styles.container}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textInput} />
<View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
},
inner: {
padding: 24,
flex: 1,
justifyContent: "space-around"
},
header: {
fontSize: 36,
marginBottom: 48
},
textInput: {
height: 40,
borderColor: "#000000",
borderBottomWidth: 1,
marginBottom: 36
},
btnContainer: {
backgroundColor: "white",
marginTop: 12
}
});
export default KeyboardAvoidingComponent;
ScrollViewのコンテンツが画面よりも小さい場合、スクロールしないと思います。したがって、高さを「150％」などにするか、高さのある空のビューを追加して、ScrollViewを画面よりも高く伸ばすことができます。
ScrollViewを高さ>画面のビューでラップすることもできます。
以下のヒントに従ってこの問題を修正できると思います。1）ScrollViewタグの位置を調整すると、<> </>内で条件の上に直接移動するか、次のようなScrollViewタグの上にビュータグが追加されます。
<><View style={{ Height: "auto", maxHeight: screenHeight}}><ScrollView>....</ScrollView></view></>
2）高さ、maxHeightプロパティ、flexプロパティを調整する
それがあなたのために働いたならば、私に知らせてください