Как добавить изображение вместо значков в заголовок, чтобы реагировать на нативные элементы

Я использую собственные элементы Reader Header, чтобы показать мой ящик, я столкнулся с двумя проблемами: 1) Мой ящик не покрывает всю верхнюю часть (область заголовка). (Как видно на изображении, синий цвет не покрывает весь заголовок) 2) Как добавить изображение вместо значка, поскольку я не хочу использовать response-native-vector-icons и как добавить метод onPress () к этому изображению, в основном Я хочу добавить пользовательское изображение ящика, которое onPress openDrawer. Цвет заголовка не покрывает весь заголовок

Это мой код:

import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,TouchableOpacity, Alert } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';
import {Header} from 'react-native-elements';
export default class HomeTimeTable extends Component {
  render() {
    //'rgb(45,156,219)'
    return (
      <View style={styles.container}>
      <Header
  placement="left"
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
/>
        <Timeline
          ...
        />
      </View>
    );
  }
}

Это моя таблица стилей:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  list: {
    flex: 1,
    marginTop: 20,
  },
  drawer:{
      width:20,
      height:20,
      justifyContent:"flex-start",
  }
});

react-native css react-native-stylesheet react-native-elements
person Talha Nadeem    schedule 16.03.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Код ниже должен работать.

import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,TouchableOpacity, Alert, Image } from 'react-native';
import Timeline from 'react-native-timeline-flatlist';
import {Header} from 'react-native-elements';
export default class HomeTimeTable extends Component {

  const renderCustomIconA = () => {
    return(
      <TouchableOpacity onPress={() => {console.log('A Pressed!')}}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
         />
       </TouchableOpacity>
    );
  };

  const renderCustomIconB = () => {
    return(
      <TouchableOpacity onPress={() => {console.log('B Pressed!')}}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
         />
       </TouchableOpacity>
    );
  };

  render() {
    //'rgb(45,156,219)'
    return (
      <>
        <Header
          placement="left"
          leftComponent={() => renderCustomIconA()}
          centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
          rightComponent={() => renderCustomIconB()}
        />
        <View style={styles.container}>
          <Timeline
          ...
          />
        </View>
      </>

    );
  }
}
person ridvanaltun    schedule 16.03.2020
comment
Хорошо, похоже, это хорошо, я попробовал и исправил свою вторую проблему, но заголовок по-прежнему не отображается как полный заголовок, как показано на изображении выше. - person Talha Nadeem; 16.03.2020
comment
Вы абсолютно уверены? В приведенном выше примере необходимо исправить обе проблемы. Компонент заголовка должен быть наверху. - person ridvanaltun; 16.03.2020
comment
U добавил ‹› перед заголовком, это дает мне ошибку JSX, и я добавил свой заголовок под своим ‹View› - person Talha Nadeem; 16.03.2020
comment
Вы можете заключить весь код между ‹› .... ‹/› или ‹React.Fragment› .... ‹/React.Fragment›. Также ‹View› тоже работает нормально, но фрагменты чище. - person ridvanaltun; 16.03.2020
comment
Я исправил проблему. Проблема заключалась в заполнении основного контейнера, спасибо! - person Talha Nadeem; 16.03.2020