Поддержка через панель навигации React - PullRequest
Новая
       158

Поддержка через панель навигации React

0 голосов
/ 06 августа 2020

Я разрабатываю приложение для чемпионата, и у меня есть HomeScreen , на котором менеджер должен ВХОДИТЬ, чтобы он / она мог обновить результаты.

Мои проблемы: у меня Навигатор ящика и пароль c. Как я могу передать опору 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>
  );
};

1 Ответ

0 голосов
/ 06 августа 2020

Ответ может зависеть от того, какие версии 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;
    })}}
   />

В этом Например, я отправляю информацию на другие экраны, когда нажимаю Backhandler, но это работает так же для любого другого события навигации. Так, например, если вы хотите добавить это к кнопке открытия ящика, вы просто замените 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') || "";
...