Question

我一直在寻找一个简单的解决方案，最好的做法是让抽屉显示用户的信息，即姓名，年龄等。登录将在一个单独的屏幕上进行，但在登录完成后，不知何故用户信息应该被传递给drawerNavigator。 DrawerNav - StackNav - Screen1 - Screen2 - SettingsScreen（此处将登录）

我找不到一个可行的解决方案真的很令人沮丧。世博会代码：https://snack.expo.io/@alisalimi25/user-info-drawer

import React, { Component } from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  Text,
  View
} from 'react-native';

import {
  createDrawerNavigator, createStackNavigator,
  DrawerItems, NavigationActions
} from 'react-navigation';

class Screen2 extends React.Component {
  render() {
    return(
      <View><Text>Screen2</Text></View>
    );
  }
}
class Screen1 extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Text>Screen1</Text>
        <Button
          onPress={() => this.props.navigation.openDrawer()}
          title='Open Drawer' />
      </SafeAreaView>
    );
  }
}

class SettingScreen extends React.Component {
  loginUser = () => {
    console.log('We need to pass user info into drawer navigator');
  };
  render() {
    return (
      <SafeAreaView>
        <Text>Settings Page</Text>
        <Button
          onPress={() => this.loginUser()}
          title='Login' />
      </SafeAreaView>
    );
  }
}

const StackNav = createStackNavigator(
  {
    Screen1: Screen1,
    Screen2: Screen2
  }
);

const CustomDrawerContentComponent = (props) => {
  return (
    <ScrollView>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
        <Text>Hello USER_NAME_FROM_PROPS?</Text>
        <DrawerItems {...props} />
      </SafeAreaView>
    </ScrollView>
  )
};

const DrawerNav = createDrawerNavigator(
  {
    StackNav: {
      screen: StackNav,
    },
    SettingScreen: {
      screen: SettingScreen
    }
  },
  {
    contentComponent: CustomDrawerContentComponent
  }
);

export default DrawerNav;

我确定解决方案在某处，但我还没找到。任何帮助都非常感谢。

由于

Answer 1

所以我设法使用screenProps在页面之间传递参数，但我不确定它是否是一个好的模式，因为它像全局变量一样，我认为有可能发生名称冲突在不同的导航层之间。工作代码是：导入React，{Component}来自＆＃39;反应＆＃39 ;; import { 按钮， SafeAreaView，滚动型，文本，视图来自＆＃39; react-native＆＃39;;

import {
  createDrawerNavigator, createStackNavigator,
  DrawerItems, NavigationActions
} from 'react-navigation';

class Screen2 extends React.Component {
  render() {
    return(
      <View><Text>Screen2</Text></View>
    );
  }
}
class Screen1 extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Text>Screen1</Text>
        <Button
          onPress={() => this.props.navigation.openDrawer()}
          title='Open Drawer' />
      </SafeAreaView>
    );
  }
}

class SettingScreen extends React.Component {
  constructor(props) {
    super(props);

    console.log('passed props for settingScreen are: ', props);
  }

  loginUser = () => {
    console.log('We need to pass user info into drawer navigator');
    this.props.screenProps.userId = 'Gandalf';
  };

  render() {
    return (
      <SafeAreaView>
        <Text>Settings Page</Text>
        <Button
          onPress={() => this.loginUser()}
          title='Login' />
      </SafeAreaView>
    );
  }
}

const StackNav = createStackNavigator(
  {
    Screen1: Screen1,
    Screen2: Screen2
  }
);

const CustomDrawerContentComponent = (props) => {
  console.log('props in custom component are: ', props);
  return (
    <ScrollView>
      <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
        <Text>Hello {props.screenProps.userId}</Text>
        <DrawerItems {...props} />
      </SafeAreaView>
    </ScrollView>
  )
};

const DrawerNav = createDrawerNavigator(
  {
    StackNav: {
      screen: StackNav,
    },
    SettingScreen: {
      screen: SettingScreen
    }
  },
  {
    contentComponent: CustomDrawerContentComponent
  }
);

class DrawerNavWrapper extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loggedInUser: {

      }
    };
  }
  render() {
    return(
      <DrawerNav screenProps={this.state.loggedInUser} />
    );
  }
}

export default DrawerNavWrapper;

＆＃34;登录＆＃34;在SettingScreen中按下按钮，设置了screenProps this.props.screenProps.userId =＆＃39; Gandalf＆＃39 ;; 当你打开抽屉时，＆＃34;你好Gandalf＆＃34;将会出现。

另一个解决方案是使用JS Modules。或者也许使用反应上下文（https://github.com/react-navigation/react-navigation/issues/4511）

任何人都知道更好的解决方案吗？

由于

在react-native drawerNavigator

1 个答案: