Как передать данные компоненту, который находится за пределами класса

Question

Я беру имя пользователя с моей предыдущей страницы, передавая его в качестве параметра, и получаю данные на моей новой странице как this.props.userName

Теперь я хочу передать это значение другому компоненту, который я использую в моем представлении вкладок.

Я использую React Native router flux и реагирую на собственный вид вкладок.

Проблема: поскольку я использую константу для хранения компонента выше класса, я не могу передать данные реквизита этому компоненту

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;
  }
};