react-native - 反应原生：动画未在发布模式下触发

Question

我正在使用发布模式在 android 和 iOS 上尝试我的 react 本机应用程序。不幸的是，有一个动画在发布模式下不会触发，但在调试模式下可以完美运行。

我尝试使用'useNativeDriver：true'，它改善了android上的动画，但没有解决问题

参考：“react-native”：“0.56.0”

我的抽屉.js

toggle = () => {
    Animated.timing(this.x_translate, {
        toValue: this.state.drawerOpen ? 0 : 1,
        duration: this.state.animationDuration,
        useNativeDriver: true
    }).start();
    this.setState({ drawerOpen: !this.state.drawerOpen })
}


render() {
    const menu_moveX = this.x_translate.interpolate({
        inputRange: [0, 1],
        outputRange: [-this.state.width, 0]
    });

    return (
        <Animated.View style={[this.props.style, styles.drawer, {
            transform: [
                {
                    translateX: menu_moveX
                }
            ]
        }]}>
            <ImageBackground
                source={require('../images/background.png')}
                style={{ width: '100%', height: '100%', alignItems: 'center' }}
            >
                <View style={styles.blank}></View>
                <AutoHeightImage source={require('../images/image.png')} width={0.7 * this.state.width} />
                <LineDashboard navigate={this.props.navigate} items={[this.menu[0], this.menu[1]]} sizeIcon={30} />
                <LineDashboard navigate={this.props.navigate} items={[this.menu[2], this.menu[3]]} sizeIcon={30} />
                <LineDashboard navigate={this.props.navigate} items={[this.menu[4], this.menu[5]]} sizeIcon={30} />
            </ImageBackground>

        </Animated.View>
    )
}

我的dashboard.js

componentDidMount() {
    this.props.navigation.setParams({
        handleThis: () => {
            console.log(this.drawer);
            this.setState({ loaded: true })
            this.drawer.toggle();
        }
    });
}

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        headerTitle: 'Home Page',
        headerLeft: (
            <TouchableOpacity
                onPress={() => {
                    params.handleThis();
                }}
                style={{ marginLeft: 20 }}
            >
                <Icon name="menu" size={25} color="black" />
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity
                onPress={() => {
                    console.log(navigation);
                    // navigation.goBack(null)
                    navigation.navigate('Login');
                }}
                style={{ marginRight: 20 }}
            >
                <Text style={{ color: 'red' }}>Log Out</Text>
            </TouchableOpacity>

        )
    }
}


render() {

    const { navigate } = this.props.navigation;

    return (
        <View style={styles.page}>
            <ScrollView>
                <View style={styles.pageContainer}>



                    <View style={{ height: 30 }} />

                    <AutoHeightImage source={require('../images/patient_primary_logo_white.png')} width={0.7 * width} />
                    <View style={styles.separator} />

                    <DashboardNotificationTile title={'Your Notifications'} onPress={() => navigate('Notifications')}>
                        <Text>You have 2 new notifications</Text>
                        <Text>Please click to see more</Text>
                    </DashboardNotificationTile>

                    <DashboardTile title={'Your Visits'}>
                        <Text>You have 1 upcoming visit</Text>
                        <SimpleButton onPress={() => navigate('ToBook')} title='View All Visits' width={'100%'} style={{ marginTop: 16 }} color={'green'}/>
                    </DashboardTile>

                    <DashboardTile title={'Your Expense Claims'}>
                        <Text>You have 2 open expense claims</Text>
                        <SimpleButton onPress={() => navigate('Open')} title='View All Expense Claims' width={'100%'} style={{ marginTop: 16 }} />
                    </DashboardTile>

                </View>
            </ScrollView>

            <DrawerDashboard navigate={navigate} onRef={(ref) => this.drawer = ref} style={this.state.loaded ? { opacity: 1 } : { opacity: 0 }} />

        </View >

    )
}

在 Dashboard.js 中，我有一个 headerLeft 应该触发似乎没有执行的函数 handleThis()。但是，当按下时，TouchableOpacity 组件保持“选中”状态，而不是返回其原始状态。

有什么建议吗？谢谢

编辑：

该问题在调试器未打开时随时出现。抱歉，我现在才发现它。如果启动了远程 JS 调试器，则动画效果很好。

所以，我认为问题可能是处理时间，因为当调试器打开时应用程序运行速度较慢，也许我的 handleThis() 函数没有加载......所以，我将 setParams() 从 ComponentDidMount 移动到 WillMount。

没用：\

有什么建议吗？

标签： react-nativeanimationreact-native-androidreact-native-ios