Блог

Главная - Вопросы по программированию - Как вы можете реализовать логотип в навигационной панели react-native-router-flux?

Как вы можете реализовать логотип в навигационной панели react-native-router-flux?

#react-native #navbar #react-native-router-flux

#react-native #навигационная панель #react-native-router-flux

Вопрос:

В настоящее время я пытаюсь реализовать логотип, представляющий собой png-файл, в навигационной панели react-native-router-flux. Я не уверен, возможно ли это, поскольку я не нашел ни одного примера в Интернете. Я попытался использовать свойство ‘navigationBarBackgroundImage’ из react-native-router-flux. В приведенном ниже коде свойства sceneStyle и navigationBarStyle работают, однако фоновое изображение — нет. Есть какие-нибудь советы?

     <Router
      sceneStyle={{ paddingTop: 60 }}
      navigationBarStyle={{ backgroundColor: '#80ffbf' }}
      navigationBarBackgroundImage={{src:'./Resources/GiftIt_Logo_Green.png' }}
    >

Комментарии:

1. вы смотрели на это на странице github? github.com/aksonov/react-native-router-flux/issues/1310

2. Также взгляните на то, как он создал компонент, посмотрите, как это выглядит на стороне js и ios. Вы можете обновить код вручную, но вы, вероятно, не сможете обновить, если появится что-то новое.

Ответ №1:

Я добавил логотип в навигационную панель, используя renderTitle prop в корневой сцене, и отрисовал пользовательский компонент:

 const AppLogo = () => {
  return (
    <View style={{ alignItems: 'center', marginTop: 26 }}>
      <Image source={require('./app/assets/images/appLogo.png')}
             style={{ width: 84, height: 27 }} />
    </View>
  );
};


const MyApp = React.createClass({

  render() {
    <Provider store={store}>
      <RouterWithRedux hideNavBar={true}>
        <Scene key="root" renderTitle={() => { return <AppLogo />; }}>
        <Scene key="home" component={HomePage} title="My App" initial={true} />
        ...
});

Ответ №2:

При создании вашей сцены передайте renderTitle() метод в ваш компонент scene, и вы сможете вставить туда свое изображение. Убедитесь, что вы получаете правильный относительный путь к вашему файлу изображения.

     import React from 'react';
    import { View, Image } from 'react-native';
    import { Scene, Router } from 'react-native-router-flux';
    import Feed from './components/Feed';
    import LogoText from './assets/logo-text.png';


    const RouterComponent = () => {
      return (
        <Router>
          <Scene
            key="Feed"
            renderTitle={() => (
              <View>
                <Image style={styles.headerLogo} source={LogoText} />
              </View>
            )}
            renderBackButton={() => (null)}
            navigationBarStyle={styles.header}
            component={Feed}
          />
        </Router>
      );
    };

    const styles = {
      header: {
        backgroundColor: 'lightgrey',
        padding: 25,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        height: 64,
      },
      headerLogo: {
        height: 14,
        width: 90,
      },
    };

    export default RouterComponent;

Ответ №3:

Ознакомьтесь с разделом проблем на странице github.

Попробуйте это 

     navigationBarBackgroundImage={{
        uri: 'navbar-background', // reference to resource
        width: Dimensions.get('window').width, // make sure the image stretches all the way
        height: 64, // height of the navbar
    }}