Reactjs 使用转换预设时抽头响应延迟

更新：当我使用

…TransitionPresets.SlideFromRightIOS使用动画时，问题似乎出现了


我有一个简单的屏幕，点击一个touchableOpacity，它会导航到另一个带有一些参数的屏幕。问题是，有时我需要点击两次才能移动到另一个屏幕。我不知道为什么会这样

演示：


App.js

 <SafeAreaProvider>
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{
                        headerStyle: { elevation: 0, },
                        headerTitleStyle: { fontFamily: "Google Sans Regular", color: "#161515", },
                        headerTintColor: "#787887",
                        ...TransitionPresets.SlideFromRightIOS,
                    }}
                >

componentDidMount(): void {
    axios.get("https://freegeoip.app/json/")
        .then(response => {
            let responseData = response.data;
            let calling_code = "";

            for(let country of countryData) {
                if(country.country_code === responseData.country_code) {
                    calling_code = country.calling_code;
                    break;
                }
            }

            this.setState({
                country_name: responseData.country_name,
                country_code: responseData.country_code,
                region_name: responseData.region_name,
                city_name: responseData.city,
                calling_code: calling_code,
            });
        })
        .then(() => {
            SplashScreen.hide();
        });
}

_onSelectCountry = (data) => {
    this.setState(data);
};

<KeyboardAvoidingView behavior="padding">
    <View style={ styles.signInForm }>
        <TouchableOpacity
            style={ styles.countrySelector }
            activeOpacity={ 0.1 }
            onPress={ () => Navigation.navigate("CountrySelect",
                {
                    onSelect: this._onSelectCountry,
                    countryCode: this.state.country_code,
                })
            }
        >
            <Text style={ styles.countryCode }>
                { this.state.country_code } ({ this.state.calling_code })
            </Text>
            <Icon name="arrow-drop-down" size={ 22 } />
        </TouchableOpacity>
        <TextInput
            style={ styles.phoneNumberInput }
            placeholder="Enter your mobile number"
            placeholderTextColor="#787887"
            keyboardType="phone-pad"
            autoFocus={ true }
        />
    </View>
</KeyboardAvoidingView>

屏幕1（内部渲染）

 <SafeAreaProvider>
            <NavigationContainer>
                <Stack.Navigator
                    screenOptions={{
                        headerStyle: { elevation: 0, },
                        headerTitleStyle: { fontFamily: "Google Sans Regular", color: "#161515", },
                        headerTintColor: "#787887",
                        ...TransitionPresets.SlideFromRightIOS,
                    }}
                >

componentDidMount(): void {
    axios.get("https://freegeoip.app/json/")
        .then(response => {
            let responseData = response.data;
            let calling_code = "";

            for(let country of countryData) {
                if(country.country_code === responseData.country_code) {
                    calling_code = country.calling_code;
                    break;
                }
            }

            this.setState({
                country_name: responseData.country_name,
                country_code: responseData.country_code,
                region_name: responseData.region_name,
                city_name: responseData.city,
                calling_code: calling_code,
            });
        })
        .then(() => {
            SplashScreen.hide();
        });
}

_onSelectCountry = (data) => {
    this.setState(data);
};

<KeyboardAvoidingView behavior="padding">
    <View style={ styles.signInForm }>
        <TouchableOpacity
            style={ styles.countrySelector }
            activeOpacity={ 0.1 }
            onPress={ () => Navigation.navigate("CountrySelect",
                {
                    onSelect: this._onSelectCountry,
                    countryCode: this.state.country_code,
                })
            }
        >
            <Text style={ styles.countryCode }>
                { this.state.country_code } ({ this.state.calling_code })
            </Text>
            <Icon name="arrow-drop-down" size={ 22 } />
        </TouchableOpacity>
        <TextInput
            style={ styles.phoneNumberInput }
            placeholder="Enter your mobile number"
            placeholderTextColor="#787887"
            keyboardType="phone-pad"
            autoFocus={ true }
        />
    </View>
</KeyboardAvoidingView>


导航。导航（“CountrySelect”，
{
选择：这个国家，
countryCode:this.state.country\u代码，
})
}
>
{this.state.country_code}（{this.state.calling_code}）
我不确定，但我可能可以在在线文档或类似的东西中共享源代码？打开的键盘可能会导致此问题。关闭maxLength上的键盘并测试它。我现在甚至不测试输入字段。它只是一个国家选择器。因此，我的目的是点击国家代码部分，它将导航到一个新屏幕。@请允许我理解您的要求，但只是（AFAIK）我不能在小提琴上运行react native。@RezaMadani即使键盘关闭，问题也会发生。