Реагируйте на реквизиты Native Navigation на неопределенном экране - PullRequest
Новая
       22

Реагируйте на реквизиты Native Navigation на неопределенном экране

1 голос
/ 04 июня 2019

Я новичок в реагировании на родную систему, и я следовал учебному руководству по потокам аутентификации в программе «Реагировать самостоятельно».Сейчас я использую машинопись и думаю, что это как-то связано с этим.Потому что, когда я просто копирую пример javascript, он работает. 

export default class SignInScreen extends Component<NavigationScreenProps> {

    constructor(props: NavigationScreenProps) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Sign in</Text>
                <Button title="Sign in!" onPress={this.signIn}/>
            </View>
        );
    }

    private async signIn() {
        //await AsyncStorage.setItem('userToken', 'abc');
        console.log("PROPS", this.props);
        this.props.navigation.navigate('App');
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

AuthLoadingScreen 

export default class AuthLoadingScreen extends Component<NavigationScreenProps> {

    constructor(props: NavigationScreenProps) {
        super(props);
        this.bootstrap();
    }

    private async bootstrap() {
        console.log("AUTH props", this.props);
        try {
        const userToken = await AsyncStorage.getItem('userToken');
        this.props.navigation.navigate(userToken ? 'App' : 'Auth');
        } catch (err) {
            console.log('Error', err.message);
        }
    }

    render() {
        return (
            <View>
                <ActivityIndicator />
                <StatusBar barStyle="default" />
            </View>
        );
    }
}

App.tsx 

const AppStack = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

Теперь на AuthLoadingScreen реквизиты неи я нажимаю на SignInScreen, но когда я нажимаю на кнопку, реквизит не определен.Я понятия не имею, почему, потому что все примеры, которые я нахожу, делают это таким образом?

1 Ответ

1 голос
/ 27 июня 2019

Это потому, что this не в том контексте, в котором вы его ожидаете.Функция не ограничена, поэтому this не содержит props.Вот как вы его связываете: 

<Button title="Sign in!" onPress={this.signIn.bind(this)}/>

Вы также можете использовать следующее без bind ing: 

<Button title="Sign in!" onPress={() => { this.signIn() }}/>

Хотя я предпочитаю первый пример.

...