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

【问题标题】：React Native - FlatList not rendering images and TextReact Native - FlatList 不渲染图像和文本
【发布时间】：2021-08-16 19:46:53
【问题描述】：

我正在为首次使用的用户做一个欢迎平面列表，我有一个要显示的图像和文本，但它没有呈现任何图像，我做错了什么？当我将路径放入视图时它可以工作，但是当我放入 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 上给出的数字

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

找到解决方案，问题出在我的视图上，我使用的是 item.screenText，它应该只是屏幕文本

<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>

【讨论】：