реагировать на родной: анимация не запускается в режиме релиз - PullRequest
Новая
       39

реагировать на родной: анимация не запускается в режиме релиз

0 голосов
/ 18 февраля 2019

Я пытаюсь использовать свое собственное приложение на Android и iOS в режиме релиза.к сожалению, есть анимация, которая не срабатывает в режиме релиза, которая отлично работает в режиме отладки.

Я попытался использовать 'useNativeDriver: true', который улучшил анимацию на Android, но не исправилвыпуск

для ref: "Reaction-native": "0.56.0"

my 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>
    )
}

my 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.

не сработало: \

Есть предложения?

...