У меня есть 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);





Ты можешь это сделать:
const TabNavigator = createBottomTabNavigator({
DeveloppeInclinne,
Chrono,
Session: { screen: props => <Session {...props} />},
Resultats { screen: props => < Resultats {...props} />}
}
// in class Session ...
console.info(this.props.myPath)
=> aRouteForFirebase
Я знаю, почему контейнер приложения не передает реквизиты в TabNavigator. Вам нужно будет поместить TabNavigator в функцию рендеринга.
реагирующей-навигации это не нравится ... мне нужно поместить свой TabNavigator в AppContainer, чтобы он работал.
Я не могу найти ничего в документации по реактивной навигации, которая поддерживает это. Но я могу ошибаться. Я могу предложить еще один способ сделать это. Создайте 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?
Спасибо за ваш ответ, в этом случае это сработало, но мне нужно повторно использовать сеанс с разными путями в зависимости от того, где я его использую, то же самое для результатов, в этом случае я могу поделиться общей строкой с ними обоими, но я буду использовать эти два компонента (Session и Resultats) с другими строками (путями) в зависимости от того, откуда я пришел... так что это не решит мою проблему, но большое спасибо за попытку.
Просто чтобы дать вам некоторый контекст, я создаю фитнес-приложение, в котором пользователь может регистрировать свои выступления. Сессия — это экран, на котором пользователи могут регистрировать свои выступления, которые затем сохраняются в firebase по определенному маршруту, который является именем упражнения. . Я хотел бы повторно использовать один и тот же компонент для всех упражнений в моем приложении, передав в качестве реквизита имя текущего упражнения.
Просто для уточнения:
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)
Просто найдите Redux в Google, это слишком много, чтобы объяснять. Я бы никогда не использовал этот код, потому что он создает новый TabNavigator, если вы измените свое состояние в классе Main, я опубликую лучший ответ, который вы также должны попробовать.
Вот лучшая реализация:
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, и включу его в свой проект.
Но не злоупотребляйте этим, я работаю над очень большим проектом и стараюсь избегать его, насколько могу, потому что он перемещает функции за пределы ваших классов, и это делает все непонятным, плюс вам нужно написать больше кода. для обновления вашего глобального состояния.
Я думаю, вы действительно можете запустить этот код в производстве
он возвращает undefined:/ (и да, я вызвал super(props) в конструкторе сеанса)