Как передать строку на экраны в BottomTabNavigator

У меня есть BottomTabNavigator с 4 экранами внутри, я хотел бы передать строку в некоторые из них.

Как я могу это сделать ? Спасибо.

class Main extends Component {
    static navigationOptions = {
        title: 'Developpe Inclinné',
        headerTintColor: '#fff',
        headerStyle: {
            backgroundColor: '#e8142d',
        },
    };
    render() {
        const myPath='aRouteForFirebase'
        return (
            <AppContainer myPath = {myPath} />
        );
    }
}
const TabNavigator = createBottomTabNavigator({
    DeveloppeInclinne,
    Chrono,
    Session, // needs the props
    Resultats // // needs the props
})

const AppContainer = createAppContainer(TabNavigator);
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
111
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ты можешь это сделать:

const TabNavigator = createBottomTabNavigator({
   DeveloppeInclinne,
   Chrono,
   Session: { screen: props => <Session {...props} />},
   Resultats { screen: props => < Resultats {...props} />}
}

// in class Session ...
console.info(this.props.myPath)
=> aRouteForFirebase

он возвращает undefined:/ (и да, я вызвал super(props) в конструкторе сеанса)

Ulysses 21.04.2019 20:31

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

Kape 21.04.2019 21:26

реагирующей-навигации это не нравится ... мне нужно поместить свой TabNavigator в AppContainer, чтобы он работал.

Ulysses 21.04.2019 21:34

Я не могу найти ничего в документации по реактивной навигации, которая поддерживает это. Но я могу ошибаться. Я могу предложить еще один способ сделать это. Создайте HOC и оберните в него свои компоненты. Все они будут иметь доступ к общей строке.

const SomethingCommonHOC = (Component, extraProps ) => {

  return class SomeComponent extends React.Component {
    render() {
      return <Component {...this.props} {...extraProps}/>;
    }
  };
};
// Use it something like this.
SomethingCommonHOC(Session);

Спасибо

Редактировать: я понимаю, что это трудно объяснить на самом деле. Вот почему я не большой поклонник HOC. :). Я постараюсь объяснить вам необходимые изменения.

Create a new file: 

Put this component definition in it:
const CommonHOC = (Component, extraProps) => {

      return class SomeComponent extends React.Component {
        render() {
          return <Component {...this.props} {...extraProps} />;
        }
      };
    };
export default CommonHOC

Then import it in your component files , in your case DeveloppeInclinne, Chrono, Session, Resultats.

В компоненте, где вам нужно передать общую строку: допустим, вы редактируете файл компонента сеанса

 import CommonHOC from the "path to CommonHOC"

    export default CommonHOC(Session, {
 myString: "myString"
})

Примечание: вы можете использовать динамическую константу, преобразовав 2-й параметр в объект и распространив его внутри общего компонента.

не могу заставить это работать, я не понимаю, как я могу применить это к моей настройке, которая сильно отличается от этой. как бы это перешло в мой BottomTabNavigator?

Ulysses 21.04.2019 20:53

Спасибо за ваш ответ, в этом случае это сработало, но мне нужно повторно использовать сеанс с разными путями в зависимости от того, где я его использую, то же самое для результатов, в этом случае я могу поделиться общей строкой с ними обоими, но я буду использовать эти два компонента (Session и Resultats) с другими строками (путями) в зависимости от того, откуда я пришел... так что это не решит мою проблему, но большое спасибо за попытку.

Ulysses 21.04.2019 21:26

Просто чтобы дать вам некоторый контекст, я создаю фитнес-приложение, в котором пользователь может регистрировать свои выступления. Сессия — это экран, на котором пользователи могут регистрировать свои выступления, которые затем сохраняются в firebase по определенному маршруту, который является именем упражнения. . Я хотел бы повторно использовать один и тот же компонент для всех упражнений в моем приложении, передав в качестве реквизита имя текущего упражнения.

Ulysses 21.04.2019 21:30

Просто для уточнения:

class Main extends Component {
  static navigationOptions = {
    title: 'Developpe Inclinné',
    headerTintColor: '#fff',
    headerStyle: {
        backgroundColor: '#e8142d',
    },
  };
  render() {
    const myPath='aRouteForFirebase'
    const TabNavigator = createBottomTabNavigator({
      DeveloppeInclinne,
      Chrono,
      Session: { screen: () => <Session myPath = {myPath} />},
      Resultats { screen: () => < Resultats myPath = {myPath} />}
    }
    const AppContainer = createAppContainer(TabNavigator);
    return (
        <AppContainer />
    );
  }
}

Однако я не думаю, что это красивый код, возможно, вам стоит подумать об интеграции Redux.

Это сработало, почему вы думаете, что это плохой код, и как он будет выглядеть с Redux? (у меня практически нет опыта работы с Redux)

Ulysses 21.04.2019 21:49

Просто найдите Redux в Google, это слишком много, чтобы объяснять. Я бы никогда не использовал этот код, потому что он создает новый TabNavigator, если вы измените свое состояние в классе Main, я опубликую лучший ответ, который вы также должны попробовать.

Kape 21.04.2019 22:00
Ответ принят как подходящий

Вот лучшая реализация:

class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {
      myPath: 'aRouteForFirebase',
    }
    this.AppContainer = createAppContainer(this.TabNavigator)
  }

  TabNavigator = createBottomTabNavigator({
    DeveloppeInclinne,
    Chrono,
    Session: { screen: () => <Session myPath = {this.state.myPath} />},
    Resultats { screen: () => < Resultats myPath = {this.state.myPath} />}
  })

  render() {
    const { AppContainer } = this
    return (
      <AppContainer />
    )
  }
}

Спасибо за ответ, завтра попробую разобраться, как работает Redux, и включу его в свой проект.

Ulysses 21.04.2019 22:19

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

Kape 21.04.2019 22:48

Я думаю, вы действительно можете запустить этот код в производстве

Kape 21.04.2019 22:49

Другие вопросы по теме