通過 React Navigation Drawer 的道具

Question

我正在為錦標賽開發一個應用程序，並且我有一個主屏幕，經理應該在其中登錄，以便他/她可以更新結果。

我的問題是：我有一個抽屜導航器和一個 static 密碼。 我怎樣才能讓道具 isAdmin 到其他屏幕？

情況示例：名為“Points”的屏幕有一個文本輸入，其啟用狀態將取決於評估 isAdmin=true 的 function。

主屏幕：

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') || "";