将本机图像 url 反应为参数

debugcn 发表于 Dev

罗希特·吉尔达尔

我正在尝试制作一个基本的 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>
    );
  }
}

本尼杰内尔

正如图像文档中所述，除非它们是网络图像路径，否则您不能在 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} />;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。