如何将字符串传递给屏幕到BottomTabNavigator

Question

我有一个底部标签导航器，里面有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);

Answer 1

这是一个更好的实现：

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 />
    )
  }
}

Answer 2

只是为了澄清：

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

Answer 3

我无法在支持此功能的react-navigation文档中找到任何内容。但我可能错了。我可以建议另一种方法。创建一个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"
})

注意：通过将第二个参数转换为对象并在公共组件内部传播，您可以像常量动态字符串一样

Answer 4

你可以这样做：

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

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