reactjs - React Native FilatList 和 ScrollView 详细信息屏幕

问题描述

如何消除 React Native FlatList 和 ScrollView Detail 屏幕中的空白？

JSON file

export default [
  {
    _id: '1001',
    name: 'Weeks',
    bir: 'Monday',
    iki: 'Tuesday',
    uc: 'Wednesday',
    dort: 'Thursday',
    bes: 'Friday',
    alti: 'Saturday',
    yedi: 'Sunday',
  },
  {
    _id: '1002',
    name: 'Months',
    bir: 'January',
    iki: 'February',
    uc: 'March',
    dort: 'April',
    bes: 'May',
    alti: 'June',
    yedi: 'July',
    sekiz: 'August',
    dokuz: 'September',
    on: 'October',
    onbir: 'November',
    oniki: 'December', 
  }
];

<FlatList
    data={years}
    keyExtractor={(item) => {
      return `${item.name}`;
    }}
    renderItem={({item}) => {

      return (
        <Row
          image={item.image}
          name={item.name}
          onPress={() => navigation.push('Details', {object: item})}
        />

export default (props) => {
  const {object} = props.route.params;
  return (
    <View style={styles.body}>
      <ScrollView>
        <Text style={styles.textContainer}>{object.bir}</Text>
        <Text style={styles.textContainer}>{object.iki}</Text>
        <Text style={styles.textContainer}>{object.uc}</Text>
        <Text style={styles.textContainer}>{object.dort}</Text>
        <Text style={styles.textContainer}>{object.bes}</Text>
        <Text style={styles.textContainer}>{object.alti}</Text>
        <Text style={styles.textContainer}>{object.yedi}</Text>
        <Text style={styles.textContainer}>{object.sekiz}</Text>
        <Text style={styles.textContainer}>{object.dokuz}</Text>
        <Text style={styles.textContainer}>{object.on}</Text>
        <Text style={styles.textContainer}>{object.onbir}</Text>
        <Text style={styles.textContainer}>{object.oniki}</Text>
      </ScrollView>
    </View>

https://1.bp.blogspot.com/-BhIf5R65SWA/X_xgfqsrDrI/AAAAAAAAXZI/NE5X5dM551I0WjOjN2x_3nR5pgtSquzIACLcBGAsYHQ/s320/1.jpg

https://1.bp.blogspot.com/-ZVYRjKHs-Q8/X_xgfgmJ7OI/AAAAAAAAXZE/BqETwTcp2tgKUjJVXyYIcwUcXvKZC7gQQCLcBGAsYHQ/s320/2.jpg

标签： reactjsreact-nativereact-routerscrollviewreact-native-flatlist

reactjs - React Native FilatList 和 ScrollView 详细信息屏幕

问题描述

解决方案

推荐阅读