通过 React Navigation Drawer 的道具

Question

我正在为锦标赛开发一个应用程序，并且我有一个 主屏幕，经理应该在其中登录，以便他/她可以更新结果。

我的问题是：我有一个抽屉导航器和一个静态密码。 我怎样才能让道具 isAdmin 到其他屏幕？？

情况示例： 名为“Points”的屏幕有一个文本输入，其启用状态将取决于评估 isAdmin=true 的函数。

主屏幕：

export default function Login(){
    const [senha, setSenha] = useState('');
    var isAdmin = false;


    function passCheck(pass){
        if(pass == 'Adminlaje'){
            isAdmin=true;
            alert('Signed In !')
        }
        else
             alert('Wrong password !');
        
    }
    
    return(
         <SafeAreaView>
        
                <TextInput
                value = {senha}
                onChangeText = { (senha) => setSenha(senha) }
                />
                
                <TouchableOpacity onPress = {() => passCheck(senha)}>
                    <Text>Entrar</Text>
                </TouchableOpacity>

                
        </SafeAreaView>
    );
}

我的抽屉：

const Screens = ({navigation}) =>{
  return(
    <Stack.Navigator>
    
      <Stack.Screen name = 'HomeScreen' component ={Login}
        options={{
          headerLeft: () =>(
            <TouchableOpacity style = {styles.button} onPress = {()=> navigation.toggleDrawer()}>
              <Entypo name="menu" size={35} color="black" />
            </TouchableOpacity>
          )
        }}>
      </Stack.Screen>
      
      <Stack.Screen name = 'Points' component ={Points}
        options={{
          headerLeft: () => (
            <TouchableOpacity style = {styles.button} onPress = {()=> navigation.toggleDrawer()}>
              <Entypo name="menu" size={35} color="black" />
          </TouchableOpacity>
          ),
        }}
      >
      </Stack.Screen>
     </Stack.Navigator>
  );
};

const DrawerContent = (props) => {
  return(
    <DrawerContentScrollView {...props}>
      <SafeAreaView>
        <DrawerItem
          label='HomeScreen'
          onPress = {() => props.navigation.navigate('Login')}
       
        />
        <DrawerItem
          label='Points'
          onPress = {() => props.navigation.navigate('Points')}
        />
     </SafeAreaView>
  </DrawerContentScrollView>
  )
}

export default () => {
  return(
      <Drawer.Navigator
       initialRouteName = 'Login'
       drawerContent={props => <DrawerContent {...props}/>}
    >
      <Drawer.Screen name = 'Screens' component ={Screens}/>
    </Drawer.Navigator>
  );
};

Answer 1

答案可能取决于您使用的 react-navigation 和 react-navigation-drawer 版本。在使用“react-navigation”：“^4.0.10”和“react-navigation-drawer”：“^2.3.3”的项目中，这对我有用：

 .............

 import { NavigationEvents, NavigationActions } from 'react-navigation';

 export default class HomeScreen extends Component {

 ..........

    constructor(props){
    super(props)

            this.state = {language: 'English', menuOpen: false};

     }

  ...................

  render(){

  const { navigation } = this.props;

  const setParamsAction = NavigationActions.setParams({
  params: { isAdmin: this.state.isAdmin },
  key: 'PointsScreen',
  });

  const setParamsTwo = NavigationActions.setParams({
  params: { isAdmin: this.state.isAdmin },
  key: 'OtherScreen',
  });

  return(
   <View style={styles.container}>
    <NavigationEvents
    onDidBlur={payload => {this.setState({menuOpen: true})}}
    onWillFocus={payload => {this.setState({menuOpen: false});    
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => 
     {

      this.props.navigation.dispatch(setParamsAction);
      this.props.navigation.dispatch(setParamsTwo);
      this.props.navigation.navigate('PointsScreen');
      return true;
    })}}
   />

在本例中，当我点击后处理程序时，我将信息发送到其他屏幕，但它对任何其他导航事件的工作方式相同。因此，例如，如果您想将此添加到您的抽屉打开按钮，您只需替换 this.props.navigation.openDrawer();对于 this.props.navigation.navigate('PointsScreen');.

在我的其他屏幕中：

 .............
 render(){

 const { navigation } = this.props;
 const isAdmin = navigation.getParam('isAdmin') || '';

在我的抽屉屏幕中：

 render(){

 const { navigation } = this.props;
 const pointsProps = navigation.getChildNavigation('PointsScreen');
 const isAdmin = pointsProps.getParam('isAdmin') || "";