为我的孩子创建反应原生应用程序。！

Question

我需要有关我的应用程序图标的帮助。我一直在字符周围出现灰色边框，我想在每个字符后面插入一个自定义背景。我只是迷路了。任何帮助将不胜感激。

这是来自 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,
  },
});

Answer 1

首先请在 stackoverflow 中提供正确的工作代码。
您的代码中有一些错误。

错误

1. 代码中 alignItems 样式的道具无效。没有名为 bottom 的道具。必须是 alignItems:'flex-end'
2. 您的代码中 justifyContent 中的道具无效。那应该是 justifyContent: 'flex-end' 。 More about layout props

为避免字符周围出现灰色边框，您首先需要获取设备的宽度和高度。

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,
  },
});