Создание приложения React Native для моих детей.!

Мне нужна помощь с иконками для моего приложения. У меня появляются серые границы вокруг символов, и я хочу вставить собственный фон за каждым символом. Я просто заблудился. Любая помощь будет оценена по достоинству.

Вот код из нативного проекта 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,
  },
});

Название вопроса очень впечатляет.

— 14.08.2018 07:33

Правильно ли работает этот код без ошибок ??

— 14.08.2018 07:52

javascript android ios css react-native

14.08.2018 07:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, укажите правильный рабочий код в 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,
  },
});