react-native - 如何将数据传递给类之外的组件

Question

我通过将上一页的用户名作为参数传递来获取用户名，并在新页面中获取数据作为this.props.userName

现在我想将此值传递给我在标签视图中使用的其他组件。

我正在使用React Native 路由器 Flux和React Native选项卡视图。

问题：由于我使用常量将组件存储在类上方，因此我无法将道具数据传递给该组件

const FirstRoute = () => <Profile />;
const SecondRoute = () => <Video />;
const ThirdRoute = () => <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.2)'}} />;

export default class Dashboard extends React.Component {

    constructor(props) {
        super(props);
        console.log(this.props.userName, 'props'); // want to pass this data to FirstRoute i.e: in <Profile />
    }

    state = {
        index: 1,
        routes: [
            {key: 'first', icon: 'md-contact'},
            {key: 'second', icon: 'md-videocam'},
            {key: 'third', icon: 'md-arrow-dropright-circle'},
        ],
    };

    _renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
        third: ThirdRoute
    });

    render() {
        return (
            <TabView
                tabBarPosition='bottom'
                navigationState={this.state}
                renderScene={this._renderScene}
                onIndexChange={this._handleIndexChange} // not included to decrease the code length
                initialLayout={initialLayout} // not included to decrease the code length
            />
        );
    }
}

Answer 1

您可以将_renderScene函数扩展为

_renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <Profile userName={this.props.userName} />;
    case 'second':
      return <Video />;
    case 'third':
      return <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.2)'}} />;
    default:
      return null;
  }
};