包装组件后无法导航

时间：2019-02-06 16:06:50

标签： react-native components

我有IOSWrapperNav和设置两部分，

我要附加代码：

export class IOSWrapperNav extends Component {
constructor(props){
    super(props)
}
render() {
   const flag= (this.props.profile.role==='ROLE'||this.props.profile.role==='MAINTENANCE')?true:false
   const MaintenanceView = TabNavigator({
    DashboardTabs: {
      screen: DashboardTabsWrapper,
        navigationOptions: {
          initialRouteName: 'DashboardTabs',
          title: 'Dashboard',
          tabBarIcon: ({tintColor}) => (
            <FontAwesome name='dashboard' color={tintColor} size={29}/>
          )
        }
    },
    Profile : {
      screen: ProfileWrapper,
      navigationOptions: {
        initialRouteName: 'Profile',
        title: 'Profile',
        tabBarIcon: ({tintColor}) => (
          <FontAwesome name='user' color={tintColor} size={27}/>
        )
      }
    },
    Settings: {
      screen: SettingsWrapper,
      navigationOptions: {
        initialRouteName: 'Settings',
        title: 'Settings',
        tabBarIcon: ({tintColor}) => (
          <Icon name='ios-settings' color={tintColor} size={28}/>
        )
      }
    },
    Maintenance: {
      screen: Maintenance,
      navigationOptions: {
        initialRouteName: 'Maintenance',
        title: 'Maintenance',
        tabBarIcon: ({tintColor}) => (
          <Icon name='ios-settings' color={tintColor} size={28}/>
        )
      }
    }
   },

  {
    lazyLoad: true,
    tabBarOptions:{
    style:{ paddingBottom: isIphoneXSMax()===true? 30:0,
      height:isIphoneXSMax()===true? 80: 50
    },
  },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
  });
  const NoMaintenanceView = TabNavigator({
    DashboardTabs: {
      screen: DashboardTabsWrapper,
        navigationOptions: {
          initialRouteName: 'DashboardTabs',
          title: 'Dashboard',
          tabBarIcon: ({tintColor}) => (
            <FontAwesome name='dashboard' color={tintColor} size={29}/>
          )
        }
    },
    Profile : {
      screen: ProfileWrapper,
      navigationOptions: {
        initialRouteName: 'Profile',
        title: 'Profile',
        tabBarIcon: ({tintColor}) => (
          <FontAwesome name='user' color={tintColor} size={27}/>
        )
      }
    },
    Settings: {
      screen: SettingsWrapper,
      navigationOptions: {
        initialRouteName: 'Settings',
        title: 'Settings',
        tabBarIcon: ({tintColor}) => (
          <Icon name='ios-settings' color={tintColor} size={28}/>
        )
      }
    },
   },

  {
    lazyLoad: true,
    tabBarOptions:{
    style:{ paddingBottom: isIphoneXSMax()===true? 30:0,
      height:isIphoneXSMax()===true? 80: 50
    },
  },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
  });
  const MainTab= flag?MaintenanceView:NoMaintenanceView
  return (
    <View style={{ flex: 1 }}>
      <MainTab />
    </View>
  );
}
 }

 export default connect(
state => {
  return {
    profile: state.profile,
    login: state.login
  }
},
dispatch => ({
  profileActions : bindActionCreators(ProfileActions, dispatch)
})
 )(IOSWrapperNav)

和设置：

  class Settings extends Component {
  constructor(props) {
super(props)
this.state = { }
this.version = '2.0'
  }

  /**
   * Navigation methods
     */
   goToWristbandGuide() {
   this.props.navigation.navigate('Wristband')
    }
  goToFaq() {
   this.props.navigation.navigate('Faq')
 }
  goToDashboardGuide() {
   this.props.navigation.navigate('DashboardHelp')
  }
  goToChangePassword() {
   this.props.navigation.navigate('ChangePassword')
   }
   goToSupport() {}


  handleLogout() {
    this.props.rootNav.dispatch(GoToLogin)
    }


      /**
     * Render
      */
    render() {
      return (
  <View style={styles.root}>
  <View style={styles.container}>
    <LinearGradient
      colors={['#465EDC', '#1A87F2']}
      start={{x: 0, y: 1}}
      end={{x:1,y:0}}
      locations={[.05,.95]}
      >
        <Header height={85} drawerNav={this.props.rootNav}/>
      </LinearGradient>
  <ScrollView style={styles.scroll}>
    <View style={styles.bottomContainer}>
    </View>
    <TouchableOpacity
        activeOpacity={100}>
      <View style={styles.row}>
          <Text style={styles.leftText}>Account</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity
        activeOpacity={100}
        onPress={this.goToChangePassword.bind(this)}>
      <View style={styles.row}>
          <Text style={styles.indentText}>Change Password</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity 
      activeOpacity={100}>
    <View style={styles.bottomContainer}>
    </View>
      <View style={styles.row}>
          <Text style={styles.leftText}>Help</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity
       activeOpacity={100}
       onPress={this.goToFaq.bind(this)}>
      <View style={styles.row}>
          <Text style={styles.indentText}>FAQs</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity
       activeOpacity={100}
       onPress={this.goToDashboardGuide.bind(this)}>
      <View style={styles.row}>
          <Text style={styles.indentText}>Dashboard Data Guide</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity
        activeOpacity={100}
        onPress={this.goToWristbandGuide.bind(this)}>
      <View style={styles.row}>
          <Text style={styles.indentText}>Wristband User Guide</Text>
      </View>
    </TouchableOpacity>
    <TouchableOpacity
       activeOpacity={100}
       onPress={this.goToSupport.bind(this)}>
    </TouchableOpacity>
    <TouchableOpacity 
      activeOpacity={100}>
    <View style={styles.bottomContainer}>
    </View>
      <View style={styles.row}>
          <Text style={styles.leftText}>Support</Text>
      </View>
    </TouchableOpacity>
      <View style={styles.row}>
          <Text style={styles.indentText} numberOfLines={1}>Version</Text><View style={[styles.rightBox]}>
          <View style={{backgroundColor: Colors.VITALACY_PURPLE, padding: 3, paddingLeft: 5, paddingRight: 5, borderRadius: 8, marginRight: 25}}>
          <Text style={[styles.rightText,{color: '#FFFFFF', fontFamily: 'NunitoSans-regular', marginRight: 0}]} >{this.version}</Text></View>
      </View>
      </View>
    <TouchableOpacity
       activeOpacity={100}>
      <View style={styles.row}>
          <Text style={styles.indentText}>Help Center</Text><View style={styles.rightBox}><Text style={styles.rightTextEmail}  onPress={() => Linking.openURL('mailto:help@vitalacy.com')}>help@vitalacy.com</Text></View>
      </View>
    </TouchableOpacity>

    <TouchableOpacity
        activeOpacity={100}
        onPress={this.handleLogout.bind(this)}>
      <View style={styles.logoutRow}>
          <Text style={styles.leftText}>Logout</Text>
      </View>
      </TouchableOpacity>

  </ScrollView>
  </View>
  </View>
      )
   }
 }



  export default connect(
    state => {
   return {
  profile: state.profile,
  login: state.login
}
 },
  dispatch => ({
    profileActions : bindActionCreators(ProfileActions, dispatch)
    })
    )(Settings)

问题是我决定包装IOSWrapperNav之后，此功能：Settings组件中的handleLogout（）无法正常工作。

在包装它之前，IOSWrapperNav组件看起来像这样，并且handleLogout（）正常工作：

     const DashboardTabsWrapper = ({navigation}) =>
      <DashboardTabs screenProps={navigation} />

 const ProfileWrapper = ({navigation}) =>   
   <ProfileNav screenProps={navigation} />

 const DrawerContentWrapper = (props) => 
  <DrawerContent items={props} navigation={props.navigation} />


 const SettingsWrapper = (props) => 

   <SettingsNav screenProps={props.navigation} />
  /**
   * Tab Navigator
   */

  const MaintenanceScreen=
   TabNavigator({
   DashboardTabs: {
screen: DashboardTabsWrapper,
  navigationOptions: {
    initialRouteName: 'DashboardTabs',
    title: 'Dashboard',
    tabBarIcon: ({tintColor}) => (
      <FontAwesome name='dashboard' color={tintColor} size={29}/>
    )
  }
   },
    Profile : {
screen: ProfileWrapper,
navigationOptions: {
  initialRouteName: 'Profile',
  title: 'Profile',
  tabBarIcon: ({tintColor}) => (
    <FontAwesome name='user' color={tintColor} size={27}/>
  )
}
   },
     Settings: {
    screen: SettingsWrapper,
navigationOptions: {
  initialRouteName: 'Settings',
  title: 'Settings',
  tabBarIcon: ({tintColor}) => (
    <Icon name='ios-settings' color={tintColor} size={28}/>
  )
}
   },
    Maintenance: {
screen: Maintenance,
navigationOptions: {
  initialRouteName: 'Maintenance',
  title: 'Maintenance',
  tabBarIcon: ({tintColor}) => (
    <Icon name='ios-settings' color={tintColor} size={28}/>
  )
   }
   }
    },

 {
 lazyLoad: true,
  tabBarOptions:{
  style:{ paddingBottom: isIphoneXSMax()===true? 30:0,
  height:isIphoneXSMax()===true? 80: 50
    },
    },
  tabBarPosition: 'bottom',
  swipeEnabled: false,
   })

  const NoMaintenanceScreen= TabNavigator({
   DashboardTabs: {
   screen: DashboardTabsWrapper,
  navigationOptions: {
    initialRouteName: 'DashboardTabs',
    title: 'Dashboard',
    tabBarIcon: ({tintColor}) => (
      <FontAwesome name='dashboard' color={tintColor} size={29}/>
    )
  }
  },
 Profile : {
 screen: ProfileWrapper,
 navigationOptions: {
  initialRouteName: 'Profile',
  title: 'Profile',
  tabBarIcon: ({tintColor}) => (
    <FontAwesome name='user' color={tintColor} size={27}/>
  )
}
   },
   Settings: {
  screen: SettingsWrapper,
  navigationOptions: {
  initialRouteName: 'Settings',
  title: 'Settings',
  tabBarIcon: ({tintColor}) => (
    <Icon name='ios-settings' color={tintColor} size={28}/>
  )
}
  },

 },

 {
 lazyLoad: true,
 tabBarOptions:{
 style:{ paddingBottom: isIphoneXSMax()===true? 30:0,
height:isIphoneXSMax()===true? 80: 50
  },
 },
  tabBarPosition: 'bottom',
  swipeEnabled: false,
})

      const IOSNav= true? 
      MaintenanceScreen
       :
       NoMaintenanceScreen;


   export default IOSNav

如果需要，这里是GoToLogin的代码：

  export const GoToLogin = NavigationActions.reset({
index: 0,
actions: [
  NavigationActions.navigate({ routeName: 'Login'})
]
})

我一直试图找到问题，但是什么都没有发生……为了从父组件获取道具，我不得不将其包装起来。谢谢你的帮助

0 个答案:

没有答案
相关问题
最新问题