Question

我创建了一个名为HomeDrawer的导航抽屉，在此抽屉中，我将显示两项-Home和Settings。因此，我创建了两个类-NoteMeHome和SettingsScreen。

现在，如果我想通过单击按钮从设置屏幕转到另一个类（LoginScreen.js），而这不是导航抽屉的一部分，则它不起作用

在这里，我提供了必要的代码来理解问题。

HomeScreen.js

class HomeScreen extends React.Component {
  state = {
    getValue: null,
  }

  async componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
  }

  render() {
    console.log('#ZZZ:', this.state.getValue);
      return (
        <AppStackNavigator/>
      ); 
  }
}


const AppStackNavigator = new StackNavigator({
  HomeDrawer: {screen:HomeDrawer},
  WelcomeScreen: {screen:WelcomeScreen},
  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen}
})

export default HomeScreen;

HomeDrawer.js

class HomeDrawer extends Component {

  state = {
    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (

 <View style={{backgroundColor:"#ffff", height:'100%'}}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
          <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
        </View>

      </Body>
      </ImageBackground>

    <Content style={{marginTop:30 }}>
      <DrawerItems {...props}/>
    </Content>

  </View>

);

const MyApp = DrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },
  Settings:{
    screen: SettingsScreen
  },
},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}

);

SettingsScreen.js

class SettingsScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    title: "Settings",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/automatic.png'}}
            style={styles.icon}
    />
  })

  render() {
    return(

      <Container>
        <CustomHeader
          title="Settings"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />
        <Content contentContainerStyle={{flex:1, alignItems:'center', 
        justifyContent:'center', padding:10}}>
        <Button full onPress={() => this.props.navigation.navigate('LoginScreen')}>
          <Text style={{color:'white'}}>Go To Home Screen</Text>
        </Button>
        </Content>
      </Container>
    )
  }
}

export default SettingsScreen;

Answer 1

**检查此示例项目enter link description here **

https://github.com/habeebrahmanpt/ReactNativeBoilerplate/blob/master/App/Navigation/AppNavigation.js

 // drawer stack  
 const DrawerStack = createDrawerNavigator({               
    HomeScreen: { screen: HomeScreen },     
     TestPage: { screen: TestPage }            
 }, {         
initialRouteName: 'HomeScreen',         
drawerWidth: Dimensions.get('window').width / 1.3,     
headerMode: 'none',         
drawerPosition: 'left',        
useNativeAnimations: false,       
drawerBackgroundColor: 'transparent' ,      
contentComponent: CounterApp,       
  })    


  const PrimaryNav = createStackNavigator({       
//   BottomStack: { screen: BottomStack },       
    DrawerStack: { screen: DrawerStack },       
   HomeScreen: { screen: HomeScreen },       
    CounterApp: { screen: CounterApp },       
   TestPage: { screen: TestPage },       
     Cart: { screen: Cart },       
      }, {       
    // Default config for all screens       
     headerMode: 'none',       
      title: 'HomeScreen',       
      initialRouteName: 'BottomStack'       
    })       

export default PrimaryNav

使用React-Native中的按钮从抽屉导航屏幕转到抽屉导航屏幕之外的方法是什么？

1 个答案: