Передача реквизита из компонента в функцию

Question

У меня есть навигатор с двумя кнопками.Когда я нажимаю кнопку входа в систему, я хочу удалить из кэша токен аутентификации и сменить экран на логин.

function doSomething(props) {
AsyncStorage.removeItem(AUTH_EMAIL);
AsyncStorage.removeItem(AUTH_TOKEN);
props.navigation.navigate("Login")
}

const CustomContentComponent = (props) => (

<SafeAreaView style={{flex: 1}}>
    <ScrollView>
        <TouchableOpacity style={{flex: 1}}
                          onPress={() => 
props.navigation.navigate("About")}>
            <Text style={mainStyles.blackBigFont}>About</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{flex: 1}}
                          onPress={doSomething.bind(props)}>
            <Text style={mainStyles.blackBigFont}>Login Page</Text>
        </TouchableOpacity>
    </ScrollView>
</SafeAreaView>
);

const AppDrawerNavigator = createDrawerNavigator({
    Dashboard: {
        screen: Dashboard,
    },
    About: {
        screen: About,
    },
},
{
    contentComponent: CustomContentComponent
});

Answer 1

Вам нужно взять свою функцию внутри компонента и использовать синтаксис ES6 для метода, тогда вам не нужно будет связывать this

const CustomContentComponent = props => {
  doSomething = () => {
    AsyncStorage.removeItem(AUTH_EMAIL);
    AsyncStorage.removeItem(AUTH_TOKEN);
    this.props.navigation.navigate("Login");
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView>
        <TouchableOpacity
          style={{ flex: 1 }}
          onPress={() => props.navigation.navigate("About")}
        >
          <Text style={mainStyles.blackBigFont}>About</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{ flex: 1 }} onPress={doSomething}>
          <Text style={mainStyles.blackBigFont}>Login Page</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};