2017-05-10 24 views
6

Đây là drawerNavigation tôi:Làm thế nào để Khóa ngăn kéo cho trang cụ thể sử dụng drawerNavigation [phản ứng-navigation] [phản ứng bản địa]

const DashboardStack = StackNavigator({ 
     Dashboard: { 
      screen: Dashboard 
     }, 
    }, { 
     headerMode: 'screen', 
    }); 

const DetailsformStack = StackNavigator({ 
    Detailsform: { 
     screen: Detailsform 
    }, 
}, { 
    headerMode: 'none' 
}); 

const OtpStack = StackNavigator({ 
    Otp: { 
     screen: Otp, 
     drawer: { 
      lockMode: 'locked-closed' 
     } 
    }, 
    }, { 
     headerMode: 'none' 
}); 

const MobilenumberStack = StackNavigator({ 
    Mobilenumber: { 
     screen: Mobilenumber 
    }, 
}, { 
    headerMode: 'none' 
}); 

const DrawerviewStack = StackNavigator({ 
    Drawerview: { 
     screen: Drawerview 
    }, 
}, { 
    headerMode: 'none' 
}); 

const ExamsheetStack = StackNavigator({ 
    Examsheet: { 
     screen: Examsheet 
    }, 
}, { 
    headerMode: 'none' 
}); 

const TopicStack = StackNavigator({ 
    Topic: { 
     screen: Topic 
    }, 
}, { 
    headerMode: 'screen' 
}); 

const DrawerStack = DrawerNavigator({ 
    Otp: { 
     screen: OtpStack, 
    }, 
    Dashboard: { 
     screen: DashboardStack, 
    }, 
    Detailsform: { 
     screen: DetailsformStack, 
    }, 
    Mobilenumber: { 
     screen: MobilenumberStack, 
    }, 
    Drawerview: { 
     screen: DrawerviewStack, 
    }, 
    Examsheet: { 
     screen: ExamsheetStack, 
    }, 
    Topic: { 
     screen: TopicStack, 
    } 
}, { 
    headerMode: 'none', 
    initialRouteName: 'Mobilenumber', 
    contentComponent: Drawerview, 

    lockMode: 'locked-closed' 
}); 

mặc định xuất khẩu DrawerStack

Làm thế nào tôi có thể thêm chế độ khóa lockMode đến trang cụ thể.

tôi đã thử thêm drawer: {lockMode: 'locked-closed'} vào cả trang thành phần và ngăn kéoTrang điều tra nhưng nó không hoạt động.

Điều hướng phản ứng có tính năng chế độ khóa hoặc tôi có cần tắt cử chỉ vuốt không?

Nếu không có tính năng nào thì hãy cho tôi biết cách tắt cử chỉ vuốt cho một thành phần hoặc trang cụ thể.

Trả lời

6

martnu đã cung cấp số patch cho điều này, nhưng chưa được hợp nhất. Tôi đã cố vá nó theo cách thủ công và hoạt động hoàn hảo.

Nó hoạt động với sự thay đổi duy nhất của hai tập tin: (tham khảo trang này https://github.com/react-community/react-navigation/pull/793/files)

  1. phản ứng-navigation/src/TypeDefinition.js,

sao chép dưới đây mã vào NavigationDrawerScreenOptions, ngay trên NavigationRouteConfigMap, được đưa vào khai báo NavigationDrawerScreenOptions:

drawerLockMode?: 'unlocked' | 'locked-close' | 'locked-open', 
  1. phản ứng-navigation/src/views/DrawerView.js,

sao chép dưới mã vào render() ngay trước khi hàm trả về:

const options = this.props.router.getScreenOptions(
    addNavigationHelpers({ 
     state: this._screenNavigationProp.state, 
     dispatch: this._screenNavigationProp.dispatch, 
    }), 
    this.props.screenProps, 
); 

và sao chép mã bên dưới vào trả lại <DrawLayout> đạo cụ, ngay sau ref:

drawerLockMode={options.drawerLockMode || 'unlocked'} 

Cách sử dụng:

bạn có thể vô hiệu hóa các ngăn kéo trên bất kỳ màn hình bởi chỉ cần thêm:

navigationOptions: { 
    drawerLockMode: 'locked-closed' 
} 

và cho phép ngăn kéo:

navigationOptions: { 
    drawerLockMode: 'unlocked' 
} 
+1

Wow cám ơn rất nhiều! Điều này làm việc hoàn hảo! –

Các vấn đề liên quan