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移交给<View>标记，该标记现在具有固定backgroundColor 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

Tach，der Herr。

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

<强>予。将图像保留在构建的应用程序中

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

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

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

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

<强> II。使用外部资源

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

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

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

我忘记了什么吗？

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

1 个答案: