我正在制作一个屏幕，上面有一个标题，它将保持不变，然后在下面有一个平面列表。屏幕底部有一个页脚，其中有一个InputFeild。我在这里使用keyboardAwareScrollView库。所以我现在面临的问题是，当我单击TextInput时，键盘打开了，但是该字段没有随它向上移动（对于IOS）。因此，在android中，文本字段会随着键盘向上移动，但scrollview的行为不正确。它不会向上滚动到标题。
最近两天我一直在努力使它正常运行，但似乎没有任何效果。请复制代码并运行它。这只是一个UI屏幕。
import React from "react";
import {
Button,
View,
Text,
Image,
Platform,
StyleSheet,
Dimensions,
FlatList,
ScrollView,
TextInput,
KeyboardAvoidingView,
TouchableOpacity
} from "react-native";
import Icon from "react-native-vector-icons/dist/FontAwesome";
import { SearchBar } from "react-native-elements";
import { SafeAreaView } from "react-navigation";
import StickyHeaderFooterScrollView from 'react-native-sticky-
header-footer-scroll-view';
import { KeyboardAwareScrollView } from "react-native-keyboard-
aware-scroll-view";
class BadCallCommentsScreen extends React.Component {
onBackButtonPress = () => {
this.props.navigation.goBack();
};
static navigationOptions = {
//title: 'Profile'
header: null
};
render() {
return (
<View
style={{
flex: 1,
backgroundColor: "#121212"
}}
>
<View
style={{
backgroundColor: "#1b1c1e",
//height: 230
}}
>
<TouchableOpacity onPress={this.onBackButtonPress}>
<View
style={{
flexDirection: "row",
marginTop: 40,
alignItems: "center",
marginLeft: 20,
marginBottom: 20
}}
>
<Image
style={{}}
source={require("./images/gray_back_button.png")}
/>
<Text
style={{
color: "gray",
paddingLeft: 10,
fontSize: 15
}}
>
Back
</Text>
</View>
</TouchableOpacity>
<View
style={{
flexDirection: "row",
alignItems: "center"
}}
>
<Image
style={{
width: 25,
height: 25,
marginRight: 10,
marginLeft: 20
}}
source={require("./images/person_image.png")}
disabled={true}
/>
<View style={{}}>
<Text
style={{
color: "white"
}}
>
John Doe
</Text>
<Text
style={{
color: "white"
}}
>
jan 12
</Text>
</View>
</View>
<View
style={{
margin: 20
}}
>
<Text
style={{
color: "#EE3846",
fontSize: 16
}}
numberOfLines={3}
>
It doesn't get much worse than this call.. Sample Text
Check..
</Text>
</View>
<View
style={{
marginLeft: 20,
paddingBottom: 20,
flexDirection: "row",
alignItems: "center"
}}
>
<Text
style={{
color: "grey",
fontSize: 12,
marginRight: 10
}}
>
400 Comments
</Text>
</View>
</View>
{/* Top View Ends Here */}
<ScrollView>
<BadcallCommentList />
</ScrollView>
<View
style={{
//flex: 0.1,
width: "100%",
height: 60,
flexDirection: "row",
alignItems: "center",
}}
>
<View
style={{
width: "80%",
flexDirection: "row",
borderWidth: 0,
borderColor: "gray",
marginLeft: 20,
marginRight: 10,
borderRadius: 20
}}
behavior="height"
>
<TextInput
style={{
width: "100%",
height: 40,
color: "white",
backgroundColor: "#232122",
borderRadius: 20
}}
placeholder="Comments"
placeholderTextColor="white"
paddingLeft={15}
marginRight={30}
/>
</View>
<Image
style={{}}
source={require("./images/microphone.png")}
disabled={true}
/>
</View>
</View>
);
}
}
const win = Dimensions.get("window");
const styles = StyleSheet.create({
red: {
color: "red"
}
});
export default BadCallCommentsScreen;
//**** NEW COMPONENT *******//
class BadcallCommentList extends React.Component {
render() {
return (
<View>
<FlatList
data={
(data = [
{ key: '1', value: "John Doe is supporting this" },
{ key: '2', value: "Sample Text 2" },
{ key: '3', value: "Sample Text 3" },
{ key: '4', value: "Sample Text 4" }
//{ key: "Hello World" }
])
}
renderItem={({ item }) => (
<View
style={{
backgroundColor: "#1b1c1e",
marginLeft: 20,
marginRight: 20,
marginTop: 20,
borderRadius: 15,
padding: 10,
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center"
}}
>
<Image
style={{
width: 25,
height: 25,
marginRight: 10,
marginLeft: 20
}}
source={require("./images/person_image.png")}
disabled={true}
/>
<View style={{}}>
<Text
style={{
color: "white"
}}
>
John Doe
</Text>
<Text
style={{
color: "white"
}}
>
jan 12
</Text>
</View>
</View>
<Text
style={{
marginTop: 10,
marginLeft: 10,
marginRight: 10,
marginBottom: 10,
paddingBottom: 20,
color: "white"
}}
numberOfLines={3}
>
How horrible was this call? Let me count the ways.
Worst blown
call
</Text>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center"
}}
>
<Text
style={{
color: "gray",
fontSize: 12,
marginLeft: 10
}}
>
372 Likes
</Text>
</View>
</View>
<View
style={{
borderWidth: 0.8,
borderColor: "#222222",
margin: 5
}}
/>
<View
style={{
flexDirection: "row",
marginTop: 3,
marginLeft: 5,
justifyContent: "space-between"
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center"
}}
/>
<View
style={{
flexDirection: "row"
}}
>
<Icon
name="thumbs-up"
color="gray"
size={25}
style={{
marginRight: 40
}}
/>
<Icon
name="thumbs-down"
color="gray"
size={25}
style={{
marginRight: 10
}}
/>
</View>
</View>
</View>
)}
/>
</View>
);
}
}
我想要的是应该固定页眉和页脚，并且只有inBetween的flatlist才能滚动。当键盘弹出时，flatlist应该滚动。但是在任何情况下，如果不可能的话，我们也可以做类似的事情，当键盘打开时，标题可能不会固定，但应该滚动。任何帮助将不胜感激。