javascript - 为我的孩子创建反应原生应用程序。!
问题描述
我需要有关我的应用程序图标的帮助。我一直在字符周围出现灰色边框,我想在每个字符后面插入一个自定义背景。我只是迷路了。任何帮助,将不胜感激。
这是来自 React 本机项目的代码。
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,ImageBackground,button,
TouchableOpacity} from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<TouchableOpacity style={styles.button}>
<Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
style={{width: 122, height: 550}} />
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image source={{uri:
'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
style={{width: 122, height: 550}} />
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
style={{width: 122, height: 500}} />
</TouchableOpacity>
<ImageBackground source={{uri: 'http://www.color-hex.com/palettes/6563.png'}} style={{width: '100', height: '100'}}>
<Text>Inside</Text>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue',
alignItems: 'bottom',
justifyContent: 'bottom',
},
button: {
backgroundColor: '#859a9b',
borderRadius: 150,
padding: 1,
marginBottom: -100,
shadowColor: 'white',
shadowOffset: { width: 10, height: 0 },
shadowRadius: 20,
shadowOpacity: 0.45,
},
});
解决方案
首先请在stackoverflow中提供正确的工作代码。
您的代码中存在一些错误。
错误
- 代码中alignItems样式的道具无效。没有称为底部的道具。它需要是
alignItems:'flex-end'
- 代码中justifyContent中的道具无效。那应该是
justifyContent: 'flex-end'
。更多关于布局道具
为避免字符周围出现灰色边框,您首先需要获取设备的宽度和高度。
import {Dimensions} from 'react-native'
然后在主类之前创建 const 以获取设备宽度和高度。
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
您需要像这样添加背景图像代码..
<ImageBackground source={{uri: 'http://www.color-hex.com/palettes/6563.png'}}
style={{width: width, height: height,flexDirection:'row'}}>
</ImageBackground>
删除按钮背景颜色代码 backgroundColor: '#859a9b',
完整的正确代码应如下所示...
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,ImageBackground,button,
TouchableOpacity,Dimensions} from 'react-native';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default class App extends Component<{}> {
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<ImageBackground source={{uri: 'http://www.color-hex.com/palettes/6563.png'}} style={{width: width, height: height,flexDirection:'row'}}>
<TouchableOpacity style={styles.button}>
<Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
style={{width: 122, height: 550}} />
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image source={{uri:
'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
style={{width: 122, height: 550}} />
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
style={{width: 122, height: 500}} />
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue',
alignItems: 'flex-end',
justifyContent: 'flex-end',
},
button: {
borderRadius: 150,
padding: 1,
marginBottom: -100,
shadowColor: 'white',
shadowOffset: { width: 10, height: 0 },
shadowRadius: 20,
shadowOpacity: 0.45,
},
});
推荐阅读
- blockchain - 从外部合约调用时,solidity 合约状态变量值显示奇怪
- php - 下定义的常量名称假定为“名称”
- mapi - Outlook 在未加入域的笔记本电脑上颠簸 /mapi/emsmdb
- ios - Swift - 如何确定应用程序暂停时哪个 ViewController 处于活动状态?
- json - How to encode a dictionary of Codables in Swift?
- ios - 快速使用 JSON 数组
- arrays - 元素数组的运算符重载
- php - 如何将 php 登录文件重定向回 index.html,并显示消息“欢迎用户”
- java-8 - 带有 try catch 的 Java8 谓词
- ajax - Laravel 中的 AJAX 调用返回 Http 异常