React Native FilatList and ScrollView Detail Screen

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

在此处输入图像描述

Answer 3

@kikirim其工作检查此示例

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

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