Question

我正在使用React Native Cli，但是React-Navigation有问题。如何使抽屉平稳移动？例如，当我向右滑动抽屉（使用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

对于react-navigation v3，我发现了这个github issue，它讨论了这个问题。据我了解，该问题的发生是因为反应导航使用react-native-gesture-handler。（希望）这将在react-navigation v4中解决。在此之前，我建议停用滑动操作（像我一样）或降级版本。

反应导航：在抽屉上滑动会使我的抽屉卡住而无法移动

1 个答案: