Question

如何消除 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

Answer 1

试试这个映射，它会解决你的问题

data =  [
  {
    _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', 
  }
];

data.map(item=>(
Object.keys(item).map(children=>(
console.log(item[children])
))))

paramsObject = {
    _id: '1001',
    name: 'Weeks',
    bir: 'Monday',
    iki: 'Tuesday',
    uc: 'Wednesday',
    dort: 'Thursday',
    bes: 'Friday',
    alti: 'Saturday',
    yedi: 'Sunday',
  }
  
  Object.values(paramsObject).map(children=>(
console.log(children,'params data')
))

//try this things

//Object.values(paramsObject).map(children=>(
// <Text>{children}</Text>
//))

为 React-naitve 试试这个

export default (props) => {
  const {object} = props.route.params;
  return (
    <View style={styles.body}>
      <ScrollView>
    {Object.values(object).map(children=>(
    <Text  style={styles.textContainer}>{children}</Text>
    ))}
    
      </ScrollView>
    </View>

也试试这个。

export default (props) => {
      const {object} = props.route.params;
      return (
        <View style={styles.body}>
          <ScrollView>
{Object.keys(object).filter(item=>item !== '_id').map(children=>(
    <Text  style={styles.textContainer}>{object[children]}</Text>
    ))}
              </ScrollView>
        </View>





paramsObject = {
        _id: '1001',
        name: 'Weeks',
        bir: 'Monday',
        iki: 'Tuesday',
        uc: 'Wednesday',
        dort: 'Thursday',
        bes: 'Friday',
        alti: 'Saturday',
        yedi: 'Sunday',
      }


{Object.keys(paramsObject).filter(item=>item !== '_id').map(children=>(
 console.log(paramsObject[children])
    ))}

Answer 2

感谢@Waleed Nasir，

*name: 'Weeks',
image: require('../../assets/logo.png'),* => Do not show these codes

enter image description here

React Native FilatList 和 ScrollView 详细信息屏幕

2 个答案: