Реагирование на навигацию: проведите пальцем по ящику, чтобы мой ящик застрял во время движения

Question

Я использую React Native Cli и у меня проблема с React-Navigation.Как я могу заставить Ящик двигаться плавно?Например, когда я смахиваю ящик (созданный с реагирующей навигацией) вправо, он застревает при переходе.Я не знаю почему.

На моих экранах нет изображений в фоновом режиме и они не содержат много информации.

App.js

export default class App extends Component { 
  render() {
    return (
      <View style={styles.container}>
        <Drawer />
      </View>
    );
  }
}

Drawer.js

const WIDTH = Dimensions.get('window').width;

const DrawerConfig ={
    drawerWidth: WIDTH * 0.86,
    contentComponent: ({navigation}) => {
        return (<MenuDrawer navigation = {navigation} />);
    },
    initialRouteName: 'ActProgramadas',
}

const DrawerNav = createDrawerNavigator({
    Login: {
        screen: Login
    },
    InfGeneral:{
        screen: InfGeneral
    },
    ActProgramadas:{
        screen: ActProgramadas
    },
    ActRealizadas:{
        screen: ActRealizadas
    },
    ObsTecnicas:{
        screen: ObsTecnicas
    },
    Loading:{
       screen: Loading
   },
   RealizarActProgramadas:{
       screen: RealizarActProgramadas
   }
},DrawerConfig);

export default createAppContainer(DrawerNav);

MenuDrawer.js

const WIDTH = Dimensions.get('window').width
const HEIGHT = Dimensions.get('window').height

export default class MenuDrawer extends Component{

    salirAlert = () => {
        Alert.alert(
            'Salir',
            '¿Estas seguro de que deseas salir?',
            [
                {text: 'Cancelar', onPress: () => {}, style: 'cancel',},
                {text: 'Aceptar', onPress: () => {this.props.navigation.navigate('Login')}},
            ],
            {cancelable: false},            
        );
    }

    naverLink (nav,text, icon){
        if (nav=='Login'){
            return(
               <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginVertical: 8}} onPress={()=> {this.salirAlert()}}>

                <View style={styles.containerLinks}>
                    <View style={styles.iconLink}>
                        <Icon name={icon} color='#06375C'  size={27}/>
                    </View>

                    <View style={styles.textLink}>
                        <Text style={styles.text}>
                            {text}
                        </Text>
                    </View> 
                </View>
            </TouchableOpacity>
            );
        }
        return(
            <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginVertical: 8}} onPress={()=> {this.props.navigation.navigate(nav)}}>
                <View style={styles.containerLinks}>
                    <View style={styles.iconLink}>
                        <Icon name={icon} color='#06375C' size={27}/>
                    </View>
                    <View style={styles.textLink}>
                        <Text style={styles.text}>
                            {text}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    render(){
        return(
            <View style={styles.container}>
                <View style={styles.topLinks}>
                    <View style = {styles.profile}>
                        <View style={styles.imgDrawer}>
                            <Icon name="account-circle" style={styles.img} size={120} color='#fff'/>
                        </View>

                        <View style={styles.titleDrawer}>
                            <Text style={styles.geslubTitle}>GESLUB App</Text>
                            <Text style={styles.usuarioTitle}>Usuario activo: José</Text>
                        </View>
                    </View>
                </View>

                <View style={styles.bottomLinks}>
                        {this.naverLink('ActProgramadas', 'Actividades Programadas', 'alarm')}
                        {this.naverLink('ActRealizadas', 'Actividades Realizadas', 'paperclip')}
                        {this.naverLink('ObsTecnicas', 'Obs. Tecnicas', 'eye')}

                        {this.naverLink('Login', 'Salir', 'exit-to-app')}
                </View>
            </View>
        );
    }
}

Answer 1

Для реакции-навигации v3 я обнаружил эту проблему github , в которой говорится об этой проблеме.Из того, что я понимаю, проблема возникает, потому что реагирующая навигация использует реагирующий-собственный-жест-обработчик .Это (надеюсь) будет решено в реакции-навигации v4.До тех пор я предлагаю отключить действие смахивания (как я сделал) или понизить версию.