React Native - FlatList不渲染图像和文本

Question

我正在为第一次用户做一个欢迎列表，我有一个图像和文本要显示，但它不呈现任何图像，我做错了什么?当我在View中放入路径时，它可以工作，但当我放入imagePath时，它显示一个空白屏幕

import React from 'react';
import {
View,
Text,
Image,
TouchableOpacity,
FlatList,
} from 'react-native';
import ProgressCircle from 'react-native-progress-circle';
import Icon from 'react-native-vector-icons/AntDesign';
import {SafeAreaView} from 'react-native-safe-area-context';
import {TextInput, Button} from 'react-native-paper';
import styles from './styles';
import {blue} from 'chalk';
<FlatList
horizontal={true}
data={onboardingList}
renderItem={this.Welcome}
keyExtractor={(item, index) => index.toString()}
/>;
const onboardingList = [
{
screenText1: 'Get weekly overviews and find',
screenText2: 'out whats impacting your health',
screenText3: 'and wellness.',
imagePath: require('../../assets/images/wellbeing.png'),
nextScreen: 'HabitTracking',
progressCirclePercentage: 20,
},
{
screenText1: 'Explore healthyroutines and get',
screenText2: 'reminders to stay motivated along',
screenText3: 'the way.',
imagePath: require('../../assets/images/HabitTracking.png'),
nextScreen: 'Recommendation',
progressCirclePercentage: 40,
},
];
const Welcome = (item, navigation) => {
return (
<View style={styles.container}>
<View>
<Image source={item.imagePath} style={styles.image} />
</View>
<View style={styles.text_field}>
<Text style={styles.textContent}>{item.screenText1}</Text>
<Text style={styles.textContent}>{item.screenText2}</Text>
<Text style={styles.textContent}>{item.screenText3}</Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={() => navigation.navigate(item.nextScreen)}>
<ProgressCircle
percent={item.progressCirclePercentage}
radius={30}
borderWidth={2}
color="#3399FF"
shadowColor="white"
bgColor={'white'}>
<Icon name="arrowright" size={25} color="black"></Icon>
</ProgressCircle>
</TouchableOpacity>
</View>
</View>
);
};
export default Welcome;

附加问题，progressCircle没有得到我在progressCirclePercentage中给出的数字

Answer 1

找到了解决方案，问题出在我的视图上，我正在使用item。它应该只有screenext

<View style={styles.container}>
<View>
<Image source={imagePath} style={styles.image} />
</View>
<View style={styles.text_field}>
<Text style={styles.textContent}>{screenText1}</Text>
<Text style={styles.textContent}>{screenText2}</Text>
<Text style={styles.textContent}>{screenText3}</Text>
</View>
<View style={styles.footer}>
<TouchableOpacity onPress={() => handleModal(2)}>
<ProgressCircle
percent={progressCirclePercentage}
radius={30}
borderWidth={2}
color="#3399FF"
shadowColor="white"
bgColor={'white'}>
<Icon name="arrowright" size={25} color="black"></Icon>
</ProgressCircle>
</TouchableOpacity>
</View>
</View>