在react-native Navigator中顯示已登錄的用戶信息

Question

我一直在尋找一種具有最佳實踐的簡單解決方案，以使其具有顯示用戶信息（例如姓名，年齡等）的抽屜。登錄將在單獨的屏幕中進行，但登錄完成后，應將用戶信息以某種方式傳遞給drawerNavigator。 DrawerNav-StackNav-屏幕1-屏幕2-設置屏幕（登錄將在此處進行）

我找不到有效的解決方案真是令人沮喪。 博覽會代碼： 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在頁面之間傳遞參數，但是我不確定這是否是一種好的模式，因為它就像全局變量一樣，而且我認為導航的不同層之間可能會發生名稱沖突。 工作代碼是：import React，來自'react'的{Component}； 從'react-native'導入{Button，SafeAreaView，ScrollView，Text，View};

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;

在SettingScreen中按下“登錄”按鈕后，將設置screenProps this.props.screenProps.userId ='Gandalf'; 當您打開抽屜時，將顯示“ Hello Gandalf”。

另一種解決方案是使用JS模塊。 或者也許使用react上下文（ https://github.com/react-navigation/react-navigation/issues/4511 ）

有人知道更好的解決方案嗎？

謝謝