我正在玩React Native来构建一个非常基本的简单应用程序.
我有一个JSON文件,其中包含人们应该完成的一些任务.我从选项数组中随机选择一个任务,并显示文本和类型.任务有一个类型,它们有一个简短的文本,这是实际的任务,例如:
{
"text": "Open Wikipedia and read a random article.",
"type": "Knowledge"
},
我想要做的是改变所显示的背景图像的类型,以便它适合每个任务的类型.由于我使用图像作为文本背后的背景,我将不得不更改图像的源部分.
好像我不能只粘贴task.type.toLowerCase();或者将变量taskStyle放入< Image source> (将是< Image source = {require('image!{taskStyle}'}. 以同样的方式,我想将相同的变量taskStyle移交给< View>现在具有固定backgroundColor的标记作为样式,因为每种类型的任务也应该有不同的颜色.
由于我对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);
解决方法:
Tach,der Herr.
虽然我没有摆弄React的“原生”版本,但是,我有两个关于如何解决这个问题的自发想法.
I.将图像保留在构建的应用程序中
如果您知道要处理的主题/图像的数量,则可以简单地要求它们全部并将它们存储在其属性名称反映您的主题名称的对象中.
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]}} … />);
我忘记了什么吗?
原文地址:https://codeday.me/bug/20190829/1761746.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。