React native flatlist not scrolling

问题

I've been using FlatList a lot of times, and never had such experience.I'm having one view with an image on top on of a page and my list is below.When I try to scroll, list bounces to the top.

Can not find a good solution for this.

Here is my list:

  <FlatList
    data={this.props.comments.data}
    renderItem={this.renderDetailsItem}
    keyExtractor={(item, index) => index}
    />

 renderDetailsItem({ item, index }) {
    return (<CardDetailsComment
    key={item.id}
    imageUrl={item.profileImage}
    username={item.username}
    comment={item.data}
    time={item.createdAt}
    />);
        }

Here is my CardDetailsComment component:

const CardDetailsComment = (props) => {
  return (
      <View style={styles.containerStyle}>
      <Image
      style={styles.avatarStyle}
      source={{ uri: props.imageUrl }}
      />
      <View style={styles.holderStyle}>
      <Text style={styles.userStyle}>
       { props.username }
      </Text>
      <Text style={styles.timeStyle}>
       { props.comment }
      </Text>
      <Text>
       {moment.utc(props.time, 'YYYY-MM-DD HH:mm:ss').local().fromNow()}
      </Text>
      </View>
      </View>

  );
};

const styles = StyleSheet.create({
   avatarStyle: {
    height: 40,
    width: 40,
    borderRadius: 20,
  },
   containerStyle: {
     position: 'relative',
     top: 415,
     left: 10,
     bottom: 5,
   },

   holderStyle: {
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
   left: 50,
   top: -40,
   },

   userStyle: {
     paddingBottom: 5,
   },

   timeStyle: {
    paddingBottom: 10,
  }
});

回答1:

If I'm not wrong, I'm 80% sure that it happened to me and I fix it adding style to FlatList with flex: 1. Try it to see what happen!

回答2:

I am not very clear as to what you want to achieve. Your description says you want one image on top of the page and then the list. However on analysing your code i find that you are passing a component to the renderItem in your flatList which will load a list of components ( i.e the length of your data will the time that component will appear on screen )

The component has an image ( i.e number of images will again be the length of your data ) and below this image you are using properties of top, bottom, left to style your text. If you want a single image on top of the page and then the entire list should load, then simply use the Image tag in a View and then load the FlatList below the image. ( This will lead the image to be always on top and the data inside the FlatList will be scrollable )

Does this answer your question or have i completely missed your point?

回答3:

You need to use the ScrollView

来源：https://stackoverflow.com/questions/49426115/react-native-flatlist-not-scrolling

标签

react-native

react-native-flatlist