react native - cannot pass a props initially in Drawer navigator

Question

App.js

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Drawer.Navigator
          drawerContent={(props) => <DrawerContent {...props} />
          <Drawer.Screen name="Home" component={MainTabscreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

Login.js

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      bob: '',
    };
  }


  onLogin = () => {
    let userDetails = require('../api.json');
    const {email, password} = this.state;

    try {
      let loginDetails = userDetails.users.find(
        (el) => el.email && el.password,
      );
      if (email == loginDetails.email && password == loginDetails.password)
        bob = loginDetails.phoneNumber;
      this.setState({
        bob: bob,
      });

      this.props.navigation.navigate('Home');
    
    } catch (error) {
      alert('Enter Correct Username and Password');
    }
  };



   

drawer content

export function DrawerContent({...props}) {
  return (
    <View style={{flex: 1}}>
      <DrawerContentScrollView {...props}>
        <View style={{backgroundColor: 'white'}}>
          
        </View>
        <View style={{flexDirection: 'row', marginTop: 20, paddingLeft: 7}}>
        
          <View style={{marginLeft: 15, flexDirection: 'column'}}>
            <Title style={styles.title}>{** I need to get the value of state 'bob' here from Login.js ** }</Title>
          </View>
        </View>

        
      

while launching the app it shows like "can't find variable: bob" but when I was in the app and then if I try to get the variable I can able to get the value that I wanted. I am trying to debug this for the past week.

And I am a beginner to React-native

Answer 1

等待大神答复