Как отобразить текст ниже ImageBackground в реагировать родной для навигации по ящикам? - PullRequest
Новая
       15

Как отобразить текст ниже ImageBackground в реагировать родной для навигации по ящикам?

0 голосов
/ 04 января 2019

Я делаю пользовательскую навигацию по ящикам для своего приложения. Там, где я использую фоновое изображение (оно не займет много места), на фоновом изображении я использую другое изображение. После этого я должен показать немного контента под фоновым изображением.

Это компонент, который я сделал для навигации по ящикам. Я не уверен, что это правильный подход. Вы можете получить немедленный результат, вставив этот код в приложение expo. 

import React from 'react';
import { View, Text, Button, ImageBackground, Image } from 'react-native';

class Sidebar extends React.Component {
  render() {
    return (
      <ImageBackground source={{uri: 'https://images.pexels.com/photos/1738762/pexels-photo-1738762.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={{ width: '100%', height: '60%' }}>
        <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} style={{width: 200, height: 200, marginLeft: 20}} />
          <Text style={{marginTop: 70, marginLeft: 20}}>Information</Text>
          <Text style={{marginTop: 10, marginLeft: 20}}>Settings</Text>
          <Text style={{marginTop: 10, marginLeft: 20}}>Favorite</Text>
      </ImageBackground>
    );
  }  
}

export default Sidebar

Что было бы лучшим способом получить такой результат. это нормально, дайте моему тексту столько полей, сколько он будет ниже фонового изображения

1 Ответ

0 голосов
/ 04 января 2019

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

render() {
   return (
      <View style={{flex:1}}>
      <View style={{flex:1.5, justifyContent:'center', alignItems:'center'}}>
        <ImageBackground source={{uri: 'https://images.pexels.com/photos/1738762/pexels-photo-1738762.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={{width: 100, 
        height: 100}}/>
      </View>
     <View style={{flex:3}}>  
      <View style={{flex:1, flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Information</Text>
          </View>
          <View style={{flex:1, backgroundColor:'red'}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
              />
          </View>
      </View>
      <View style={{flex:1 ,flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Settings</Text>
          </View>
          <View style={{flex:1,}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
              />
          </View>
      </View>
      <View style={{flex:1, flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Favorite</Text>
          </View>
          <View style={{flex:1}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}

              />
          </View>
      </View>


     </View>

    </View>
    );
  }

Вы можете управлять своим текстом с помощью justifyContent, alignItems и flex в представлении над текстовым разделом. Вы можете использовать flex-start и flex-end или center 'для перемещения элементов в этом представлении.

Попробуйте перейти по этой ссылке: https://facebook.github.io/react-native/docs/flexbox Я надеюсь, что это поможет вам.

...