Question

我正在尝试创建一个基本的React Native应用程序，在主页面上将显示一个人的图片，并在点击时打开一个新的视图并获取该特定人员的所有详细信息。我可以打印此人的姓名但无法显示他的图像，该图像由人员姓名保存。示例 - 如果名称为XYZ，则图像名称为XYZ.jpg

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback} from 'react-native';
import { createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
    render() {
        return (
            <View style={styles.container}>
              <ScrollView vertical={true} contentContainerStyle={{flexGrow: 1}}>
                  <ScrollView horizontal={true}>
                  <TouchableWithoutFeedback  title="Go to Details" onPress={() => {
                        this.props.navigation.navigate('Details', {
                        name: 'Rohit',
                        otherParam: 'anything you want here',
                        });
                  }}>
                  <View style={styles.view}>
                      <Image source={require('./assets/rohit.jpg')} style={styles.image}></Image>
                      <Text style={styles.text}>Rohit</Text>
                  </View>
                  </TouchableWithoutFeedback>

          </ScrollView>
        </View>
    )
  }
}

class DetailsScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    const name = navigation.getParam('name', 'NO-ID');
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  ----HERE--->    <Image source={require('./assets/'+{name}+'.jpg')} style={styles.image}></Image>
        <Text>{name}</Text>
      </View>
    );
  }
}

Answer 1

正如Images docs中所述，除非它们是网络图像路径，否则不能在react-native中使用动态图像路径。需要在编译中知道本地映像路径，因此不支持动态路径。

为了使其正常工作，必须静态地知道require中的图像名称。

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

将原生图像网址反映为参数

1 个答案: