如何在 React native 中动态设置图像的来源？

Question

我正在使用 React Native 构建一个非常基本、简单的应用程序。

我有一个JSON 文件，其中包含人们应该完成的一些任务。我从一系列选项中随机选择一项任务并显示文本和类型。任务有一个类型，它们有一个短文本，即实际任务，例如：

{
    "text": "Open Wikipedia and read a random article.",
    "type": "Knowledge"
},

我还想做的是更改显示的背景图像的类型，使其适合每个任务的类型。由于我将图像用作文本后面的背景，因此我必须更改图像的 source 部分。

似乎我不能只将task.type.toLowerCase(); 或变量taskStyle 粘贴到<Image source> 中（应该是<Image source={require('image!{taskStyle}'}。

以同样的方式，我想将相同的变量taskStyle 移交给具有固定backgroundColor 的<View> 标签，现在作为style，因为应该也有不同的每种任务的颜色。

由于我对 React 知之甚少，我很确定我没有得到一个非常基本的概念，所以我不知道如何正确处理这个问题。有人可以指出我这样做的正确方法吗？任何帮助将不胜感激:)

这是 iOS 部分的完整代码：

'use strict';

var React = require('react-native');
var Tasks = require('./data/tasks.json');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBarIOS,
} = React;

var progress = React.createClass({

  render: function() {

    StatusBarIOS.setStyle(1);

    var randomTask = Math.floor(Tasks.length * Math.random());
    var task = Tasks[randomTask];

    var taskStyle = task.type.toLowerCase();

    return (
      <Image
        style={styles.container}
        source={require('image!mind')}
      >
        <View style={[
          styles.textWrapper,
          {
            backgroundColor: 'rgba(11,136,191,0.7)',
          }
        ]}>
          <Text
            style={[
              styles.category,
              styles.text,
            ]}
          >
            {task.type}
          </Text>
          <Text
            style={[
              styles.task,
              styles.text,
            ]}
          >
            {task.text}
          </Text>
        </View>
      </Image>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    resizeMode: 'cover',
    // setting these to null avoids too huge images
    width: null,
    height: null,
  },
  textWrapper: {
    alignItems: 'center',
    backgroundColor: 'transparent',
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  knowledge: {
    backgroundColor: 'rgba(240,200,46,0.8)',
  },
  text: {
    backgroundColor: 'transparent',
    fontFamily: 'Avenir',
    margin: 10,
    textAlign: 'center',
  },
  category: {
    color: 'rgba(255,255,255,0.7)',
    fontSize: 24,
  },
  task: {
    color: '#FFFFFF',
    fontSize: 36,
  },
});

AppRegistry.registerComponent('progress', () => progress);

Answer 1

塔赫先生。

虽然我还没有摆弄过“本机”版本的 React，但是对于如何解决这个问题，我有两个自发的想法。

我。将图像保留在构建的应用中

如果您知道您正在处理的主题/图像的数量，您可以简单地要求它们并将它们存储在其属性名称反映您的主题名称的对象中。

var imgTopic1 = require('image!topic1');
var imgTopic2 = require('image!topic2');
…

var topicImages = {
    topic1: imgTopic1,
    topic2: imgTopic2,
    …
};

return (<Image src={topicImages[topic]} … />);

二。使用外部资源

如果您希望能够在不发布应用升级的情况下添加更多主题/图像，您可以使用外部图像服务并从主题构建 URL。

var imgServiceRoot = 'http://example.com/images/';
var imgUrl = imgServiceRoot + topic + '.jpg';

return (<Image src={{uri: topicImages[topic]}} … />);

我是不是忘记了什么？