Question

我正在尝试使用发布模式在Android和iOS上反应本机应用程序。不幸的是，有一个动画无法在发布模式下触发，而在调试模式下效果最佳。

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

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

我的Drawer.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。

没有工作：\

有什么建议吗？

本机反应：动画不在发布模式下触发

0 个答案: