mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-05 17:28:52 +08:00
Compare commits
18 Commits
2.0.0-alph
...
2.0.0-beta
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fd7fcfbc5b | ||
|
|
06b928f5c1 | ||
|
|
acb038e213 | ||
|
|
22d4400b93 | ||
|
|
f78c264419 | ||
|
|
65bd436cbe | ||
|
|
a0745762ba | ||
|
|
89658d9361 | ||
|
|
074aabc33e | ||
|
|
eb2a1ae8fd | ||
|
|
9721353e7b | ||
|
|
523b3d8f3a | ||
|
|
f851c26642 | ||
|
|
f8f5d66bf9 | ||
|
|
72037e20fb | ||
|
|
69a23f1c9f | ||
|
|
d32463ee83 | ||
|
|
2da04f37e6 |
@@ -219,7 +219,7 @@ PODS:
|
||||
- ReactCommon/jscallinvoker (= 0.61.2)
|
||||
- RNGestureHandler (1.3.0):
|
||||
- React
|
||||
- RNScreens (2.0.0-alpha.3):
|
||||
- RNScreens (2.0.0-alpha.23):
|
||||
- React
|
||||
- Yoga (1.14.0)
|
||||
|
||||
@@ -256,7 +256,7 @@ DEPENDENCIES:
|
||||
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
|
||||
|
||||
SPEC REPOS:
|
||||
https://github.com/cocoapods/specs.git:
|
||||
https://github.com/CocoaPods/Specs.git:
|
||||
- boost-for-react-native
|
||||
|
||||
EXTERNAL SOURCES:
|
||||
@@ -342,9 +342,9 @@ SPEC CHECKSUMS:
|
||||
React-RCTVibration: fb54c732fd20405a76598e431aa2f8c2bf527de9
|
||||
ReactCommon: 5848032ed2f274fcb40f6b9ec24067787c42d479
|
||||
RNGestureHandler: 5329a942fce3d41c68b84c2c2276ce06a696d8b0
|
||||
RNScreens: a32a406ec4884f0ba383ef835332e8379f75e3da
|
||||
RNScreens: 55c735f525774e894be67848c250c95a9c3194c0
|
||||
Yoga: 14927e37bd25376d216b150ab2a561773d57911f
|
||||
|
||||
PODFILE CHECKSUM: 1a141b811c7076eb11c48f2e22336181f52531b5
|
||||
|
||||
COCOAPODS: 1.7.3
|
||||
COCOAPODS: 1.8.4
|
||||
|
||||
@@ -131,7 +131,7 @@ Screen stack component expects one or more `Screen` components as direct childre
|
||||
|
||||
`StackScreen` extends the capabilities of `Screen` component to allow additional customizations and to make it possible to handle events such as using hardware back or back gesture to dismiss the top screen. Below is the list of additional properties that can be used for `Screen` component:
|
||||
|
||||
#### `onDismiss`
|
||||
#### `onDismissed`
|
||||
|
||||
A callback that gets called when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down). The callback takes no arguments.
|
||||
|
||||
@@ -155,9 +155,8 @@ Defines how the method that should be used to present the given screen. It is a
|
||||
The config component is expected to be rendered as a direct children of `<Screen>`. It provides an ability to configure native navigation header that gets rendered as a part of native screen stack. The component acts as a "virtual" element that is not directly rendered under `Screen`. You can use its properties to customize platform native header for the parent screen and also render react-native components that you'd like to be displayed inside the header (e.g. in the title are or on the side).
|
||||
|
||||
Along with this component properties that can be used to customize header behavior one can also use one or the below component containers to render custom react-native content in different areas of the native header:
|
||||
- `ScreenStackHeaderTitleView` – react native views rendered as children will appear on the navigation bar in the place of title. Note that title is aligned next to back button on Android while it is centered on iOS.
|
||||
- `ScreenStackHeaderCenterView` – the childern will render in the center of the native navigation bar (on iOS this has the same behavior as `ScreenStackHeaderTitleView` container)
|
||||
- `ScreenStackHeaderRightView` – the children will render on the right hand side of the navigation bar (or on the left hand side in case LTR locales are set on the user's device)
|
||||
- `ScreenStackHeaderCenterView` – the childern will render in the center of the native navigation bar.
|
||||
- `ScreenStackHeaderRightView` – the children will render on the right hand side of the navigation bar (or on the left hand side in case LTR locales are set on the user's device).
|
||||
- `ScreenStackHeaderLeftView` – the children will render on the left hand side of the navigation bar (or on the right hand side in case LTR locales are set on the user's device).
|
||||
|
||||
Below is a list of properties that can be set with `ScreenStackHeaderConfig` component:
|
||||
|
||||
@@ -16,7 +16,7 @@ import com.facebook.react.uimanager.PointerEvents;
|
||||
import com.facebook.react.uimanager.ReactPointerEventsView;
|
||||
import com.facebook.react.uimanager.UIManagerModule;
|
||||
|
||||
public class Screen extends ViewGroup implements ReactPointerEventsView {
|
||||
public class Screen extends ViewGroup {
|
||||
|
||||
public enum StackPresentation {
|
||||
PUSH,
|
||||
@@ -52,6 +52,7 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
|
||||
private boolean mTransitioning;
|
||||
private StackPresentation mStackPresentation = StackPresentation.PUSH;
|
||||
private StackAnimation mStackAnimation = StackAnimation.DEFAULT;
|
||||
private boolean mGestureEnabled = true;
|
||||
|
||||
public Screen(ReactContext context) {
|
||||
super(context);
|
||||
@@ -122,6 +123,10 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
|
||||
mStackAnimation = stackAnimation;
|
||||
}
|
||||
|
||||
public void setGestureEnabled(boolean gestureEnabled) {
|
||||
mGestureEnabled = gestureEnabled;
|
||||
}
|
||||
|
||||
public StackAnimation getStackAnimation() {
|
||||
return mStackAnimation;
|
||||
}
|
||||
@@ -130,11 +135,6 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
|
||||
return mStackPresentation;
|
||||
}
|
||||
|
||||
@Override
|
||||
public PointerEvents getPointerEvents() {
|
||||
return mTransitioning ? PointerEvents.NONE : PointerEvents.AUTO;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setLayerType(int layerType, @Nullable Paint paint) {
|
||||
// ignore - layer type is controlled by `transitioning` prop
|
||||
@@ -169,4 +169,8 @@ public class Screen extends ViewGroup implements ReactPointerEventsView {
|
||||
public boolean isActive() {
|
||||
return mActive;
|
||||
}
|
||||
|
||||
public boolean isGestureEnabled() {
|
||||
return mGestureEnabled;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import android.widget.LinearLayout;
|
||||
import androidx.annotation.Nullable;
|
||||
import androidx.appcompat.widget.Toolbar;
|
||||
import androidx.coordinatorlayout.widget.CoordinatorLayout;
|
||||
import androidx.fragment.app.Fragment;
|
||||
|
||||
import com.facebook.react.uimanager.PixelUtil;
|
||||
import com.google.android.material.appbar.AppBarLayout;
|
||||
@@ -97,10 +98,35 @@ public class ScreenStackFragment extends ScreenFragment {
|
||||
}
|
||||
|
||||
public boolean isDismissable() {
|
||||
View child = mScreenView.getChildAt(0);
|
||||
if (child instanceof ScreenStackHeaderConfig) {
|
||||
return ((ScreenStackHeaderConfig) child).isDismissable();
|
||||
return mScreenView.isGestureEnabled();
|
||||
}
|
||||
|
||||
public boolean canNavigateBack() {
|
||||
ScreenContainer container = mScreenView.getContainer();
|
||||
if (container instanceof ScreenStack) {
|
||||
if (((ScreenStack) container).getRootScreen() == getScreen()) {
|
||||
// this screen is the root of the container, if it is nested we can check parent container
|
||||
// if it is also a root or not
|
||||
Fragment parentFragment = getParentFragment();
|
||||
if (parentFragment instanceof ScreenStackFragment) {
|
||||
return ((ScreenStackFragment) parentFragment).canNavigateBack();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
throw new IllegalStateException("ScreenStackFragment added into a non-stack container");
|
||||
}
|
||||
}
|
||||
|
||||
public void dismiss() {
|
||||
ScreenContainer container = mScreenView.getContainer();
|
||||
if (container instanceof ScreenStack) {
|
||||
((ScreenStack) container).dismiss(this);
|
||||
} else {
|
||||
throw new IllegalStateException("ScreenStackFragment added into a non-stack container");
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,7 +30,6 @@ public class ScreenStackHeaderConfig extends ViewGroup {
|
||||
private float mTitleFontSize;
|
||||
private int mBackgroundColor;
|
||||
private boolean mIsHidden;
|
||||
private boolean mGestureEnabled = true;
|
||||
private boolean mIsBackButtonHidden;
|
||||
private boolean mIsShadowHidden;
|
||||
private boolean mDestroyed;
|
||||
@@ -42,7 +41,16 @@ public class ScreenStackHeaderConfig extends ViewGroup {
|
||||
private OnClickListener mBackClickListener = new OnClickListener() {
|
||||
@Override
|
||||
public void onClick(View view) {
|
||||
getScreenStack().dismiss(getScreenFragment());
|
||||
ScreenStack stack = getScreenStack();
|
||||
ScreenStackFragment fragment = getScreenFragment();
|
||||
if (stack.getRootScreen() == fragment.getScreen()) {
|
||||
Fragment parentFragment = fragment.getParentFragment();
|
||||
if (parentFragment instanceof ScreenStackFragment) {
|
||||
((ScreenStackFragment) parentFragment).dismiss();
|
||||
}
|
||||
} else {
|
||||
fragment.dismiss();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -115,14 +123,9 @@ public class ScreenStackHeaderConfig extends ViewGroup {
|
||||
return null;
|
||||
}
|
||||
|
||||
public boolean isDismissable() {
|
||||
return mGestureEnabled;
|
||||
}
|
||||
|
||||
public void onUpdate() {
|
||||
Screen parent = (Screen) getParent();
|
||||
final ScreenStack stack = getScreenStack();
|
||||
boolean isRoot = stack == null ? true : stack.getRootScreen() == parent;
|
||||
boolean isTop = stack == null ? true : stack.getTopScreen() == parent;
|
||||
|
||||
if (!mIsAttachedToWindow || !isTop || mDestroyed) {
|
||||
@@ -145,7 +148,7 @@ public class ScreenStackHeaderConfig extends ViewGroup {
|
||||
ActionBar actionBar = activity.getSupportActionBar();
|
||||
|
||||
// hide back button
|
||||
actionBar.setDisplayHomeAsUpEnabled(isRoot ? false : !mIsBackButtonHidden);
|
||||
actionBar.setDisplayHomeAsUpEnabled(getScreenFragment().canNavigateBack() ? !mIsBackButtonHidden : false);
|
||||
|
||||
// when setSupportActionBar is called a toolbar wrapper gets initialized that overwrites
|
||||
// navigation click listener. The default behavior set in the wrapper is to call into
|
||||
@@ -220,11 +223,10 @@ public class ScreenStackHeaderConfig extends ViewGroup {
|
||||
case RIGHT:
|
||||
params.gravity = Gravity.RIGHT;
|
||||
break;
|
||||
case TITLE:
|
||||
params.width = LayoutParams.MATCH_PARENT;
|
||||
mToolbar.setTitle(null);
|
||||
case CENTER:
|
||||
params.width = LayoutParams.MATCH_PARENT;
|
||||
params.gravity = Gravity.CENTER_HORIZONTAL;
|
||||
mToolbar.setTitle(null);
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -303,10 +305,6 @@ public class ScreenStackHeaderConfig extends ViewGroup {
|
||||
mIsShadowHidden = hideShadow;
|
||||
}
|
||||
|
||||
public void setGestureEnabled(boolean gestureEnabled) {
|
||||
mGestureEnabled = gestureEnabled;
|
||||
}
|
||||
|
||||
public void setHideBackButton(boolean hideBackButton) {
|
||||
mIsBackButtonHidden = hideBackButton;
|
||||
}
|
||||
|
||||
@@ -99,11 +99,6 @@ public class ScreenStackHeaderConfigViewManager extends ViewGroupManager<ScreenS
|
||||
config.setHideShadow(hideShadow);
|
||||
}
|
||||
|
||||
@ReactProp(name = "gestureEnabled", defaultBoolean = true)
|
||||
public void setGestureEnabled(ScreenStackHeaderConfig config, boolean gestureEnabled) {
|
||||
config.setGestureEnabled(gestureEnabled);
|
||||
}
|
||||
|
||||
@ReactProp(name = "hideBackButton")
|
||||
public void setHideBackButton(ScreenStackHeaderConfig config, boolean hideBackButton) {
|
||||
config.setHideBackButton(hideBackButton);
|
||||
|
||||
@@ -9,21 +9,14 @@ import com.facebook.react.views.view.ReactViewGroup;
|
||||
|
||||
public class ScreenStackHeaderSubview extends ReactViewGroup {
|
||||
|
||||
public class Measurements {
|
||||
public int width;
|
||||
public int height;
|
||||
}
|
||||
|
||||
public enum Type {
|
||||
LEFT,
|
||||
CENTER,
|
||||
TITLE,
|
||||
RIGHT,
|
||||
BACK
|
||||
}
|
||||
|
||||
private int mReactWidth, mReactHeight;
|
||||
private final UIManagerModule mUIManager;
|
||||
|
||||
@Override
|
||||
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
|
||||
@@ -43,26 +36,13 @@ public class ScreenStackHeaderSubview extends ReactViewGroup {
|
||||
|
||||
@Override
|
||||
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
|
||||
if (changed && (mType == Type.CENTER)) {
|
||||
// if we want the view to be centered we need to account for the fact that right and left
|
||||
// paddings may not be equal.
|
||||
Measurements measurements = new Measurements();
|
||||
View parent = (View) getParent();
|
||||
int parentWidth = parent.getWidth();
|
||||
int rightPadding = parentWidth - right;
|
||||
int leftPadding = left;
|
||||
measurements.width = Math.max(0, parentWidth - 2 * Math.max(rightPadding, leftPadding));
|
||||
measurements.height = bottom - top;
|
||||
mUIManager.setViewLocalData(getId(), measurements);
|
||||
}
|
||||
super.onLayout(changed, left, top, right, bottom);
|
||||
// no-op
|
||||
}
|
||||
|
||||
private Type mType = Type.RIGHT;
|
||||
|
||||
public ScreenStackHeaderSubview(ReactContext context) {
|
||||
super(context);
|
||||
mUIManager = context.getNativeModule(UIManagerModule.class);
|
||||
}
|
||||
|
||||
public void setType(Type type) {
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
package com.swmansion.rnscreens;
|
||||
|
||||
import com.facebook.react.bridge.ReactApplicationContext;
|
||||
import com.facebook.react.module.annotations.ReactModule;
|
||||
import com.facebook.react.uimanager.LayoutShadowNode;
|
||||
import com.facebook.react.uimanager.ThemedReactContext;
|
||||
import com.facebook.react.uimanager.annotations.ReactProp;
|
||||
import com.facebook.react.views.view.ReactViewGroup;
|
||||
@@ -11,15 +9,6 @@ import com.facebook.react.views.view.ReactViewManager;
|
||||
@ReactModule(name = ScreenStackHeaderSubviewManager.REACT_CLASS)
|
||||
public class ScreenStackHeaderSubviewManager extends ReactViewManager {
|
||||
|
||||
private static class SubviewShadowNode extends LayoutShadowNode {
|
||||
@Override
|
||||
public void setLocalData(Object data) {
|
||||
ScreenStackHeaderSubview.Measurements measurements = (ScreenStackHeaderSubview.Measurements) data;
|
||||
setStyleWidth(measurements.width);
|
||||
setStyleHeight(measurements.height);
|
||||
}
|
||||
}
|
||||
|
||||
protected static final String REACT_CLASS = "RNSScreenStackHeaderSubview";
|
||||
|
||||
@Override
|
||||
@@ -32,19 +21,12 @@ public class ScreenStackHeaderSubviewManager extends ReactViewManager {
|
||||
return new ScreenStackHeaderSubview(context);
|
||||
}
|
||||
|
||||
@Override
|
||||
public LayoutShadowNode createShadowNodeInstance(ReactApplicationContext context) {
|
||||
return new SubviewShadowNode();
|
||||
}
|
||||
|
||||
@ReactProp(name = "type")
|
||||
public void setType(ScreenStackHeaderSubview view, String type) {
|
||||
if ("left".equals(type)) {
|
||||
view.setType(ScreenStackHeaderSubview.Type.LEFT);
|
||||
} else if ("center".equals(type)) {
|
||||
view.setType(ScreenStackHeaderSubview.Type.CENTER);
|
||||
} else if ("title".equals(type)) {
|
||||
view.setType(ScreenStackHeaderSubview.Type.TITLE);
|
||||
} else if ("right".equals(type)) {
|
||||
view.setType(ScreenStackHeaderSubview.Type.RIGHT);
|
||||
} else if ("back".equals(type)) {
|
||||
|
||||
@@ -57,6 +57,11 @@ public class ScreenViewManager extends ViewGroupManager<Screen> {
|
||||
}
|
||||
}
|
||||
|
||||
@ReactProp(name = "gestureEnabled", defaultBoolean = true)
|
||||
public void setGestureEnabled(Screen view, boolean gestureEnabled) {
|
||||
view.setGestureEnabled(gestureEnabled);
|
||||
}
|
||||
|
||||
@Nullable
|
||||
@Override
|
||||
public Map getExportedCustomDirectEventTypeConstants() {
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
ScreenStackHeaderBackButtonImage,
|
||||
ScreenStackHeaderLeftView,
|
||||
ScreenStackHeaderRightView,
|
||||
ScreenStackHeaderTitleView,
|
||||
ScreenStackHeaderCenterView,
|
||||
} from 'react-native-screens';
|
||||
|
||||
function renderComponentOrThunk(componentOrThunk, props) {
|
||||
@@ -31,7 +31,9 @@ class StackView extends React.Component {
|
||||
};
|
||||
|
||||
_onSceneFocus = (route, descriptor) => {
|
||||
descriptor.options && descriptor.options.onAppear && descriptor.options.onAppear()
|
||||
descriptor.options &&
|
||||
descriptor.options.onAppear &&
|
||||
descriptor.options.onAppear();
|
||||
this.props.navigation.dispatch(
|
||||
StackActions.completeTransition({ toChildKey: route.key })
|
||||
);
|
||||
@@ -50,7 +52,6 @@ class StackView extends React.Component {
|
||||
headerBackTitle,
|
||||
headerBackTitleVisible,
|
||||
headerTintColor,
|
||||
gestureEnabled,
|
||||
largeTitle,
|
||||
headerLargeTitleStyle,
|
||||
translucent,
|
||||
@@ -75,7 +76,6 @@ class StackView extends React.Component {
|
||||
headerBackTitleStyle && headerBackTitleStyle.fontFamily,
|
||||
backTitleFontSize: headerBackTitleStyle && headerBackTitleStyle.fontSize,
|
||||
color: headerTintColor,
|
||||
gestureEnabled: gestureEnabled === undefined ? true : gestureEnabled,
|
||||
largeTitle,
|
||||
largeTitleFontFamily:
|
||||
headerLargeTitleStyle && headerLargeTitleStyle.fontFamily,
|
||||
@@ -141,9 +141,9 @@ class StackView extends React.Component {
|
||||
headerOptions.title = options.headerTitle;
|
||||
} else {
|
||||
children.push(
|
||||
<ScreenStackHeaderTitleView key="title">
|
||||
<ScreenStackHeaderCenterView key="center">
|
||||
{renderComponentOrThunk(options.headerTitle, { scene })}
|
||||
</ScreenStackHeaderTitleView>
|
||||
</ScreenStackHeaderCenterView>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -191,6 +191,9 @@ class StackView extends React.Component {
|
||||
style={options.cardStyle}
|
||||
stackAnimation={stackAnimation}
|
||||
stackPresentation={stackPresentation}
|
||||
gestureEnabled={
|
||||
options.gestureEnabled === undefined ? true : options.gestureEnabled
|
||||
}
|
||||
onAppear={() => this._onSceneFocus(route, descriptor)}
|
||||
onDismissed={() => this._removeScene(route)}>
|
||||
{this._renderHeaderConfig(index, route, descriptor)}
|
||||
|
||||
@@ -44,6 +44,7 @@ typedef NS_ENUM(NSInteger, RNSScreenStackAnimation) {
|
||||
@property (weak, nonatomic) UIView<RNSScreenContainerDelegate> *reactSuperview;
|
||||
@property (nonatomic, retain) UIViewController *controller;
|
||||
@property (nonatomic) BOOL active;
|
||||
@property (nonatomic) BOOL gestureEnabled;
|
||||
@property (nonatomic) RNSScreenStackAnimation stackAnimation;
|
||||
@property (nonatomic) RNSScreenStackPresentation stackPresentation;
|
||||
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
_controller = [[RNSScreen alloc] initWithView:self];
|
||||
_stackPresentation = RNSScreenStackPresentationPush;
|
||||
_stackAnimation = RNSScreenStackAnimationDefault;
|
||||
_gestureEnabled = YES;
|
||||
}
|
||||
|
||||
return self;
|
||||
@@ -276,6 +277,7 @@
|
||||
RCT_EXPORT_MODULE()
|
||||
|
||||
RCT_EXPORT_VIEW_PROPERTY(active, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)
|
||||
RCT_EXPORT_VIEW_PROPERTY(stackAnimation, RNSScreenStackAnimation)
|
||||
RCT_EXPORT_VIEW_PROPERTY(onAppear, RCTDirectEventBlock);
|
||||
|
||||
@@ -102,16 +102,9 @@
|
||||
RCTRootContentView *rootView = (RCTRootContentView *)parent;
|
||||
[rootView.touchHandler cancel];
|
||||
|
||||
UIView *topView = _controller.viewControllers.lastObject.view;
|
||||
RNSScreenStackHeaderConfig *config = nil;
|
||||
for (UIView *subview in topView.reactSubviews) {
|
||||
if ([subview isKindOfClass:[RNSScreenStackHeaderConfig class]]) {
|
||||
config = (RNSScreenStackHeaderConfig*) subview;
|
||||
break;
|
||||
}
|
||||
}
|
||||
RNSScreenView *topScreen = (RNSScreenView *)_controller.viewControllers.lastObject.view;
|
||||
|
||||
return _controller.viewControllers.count > 1 && (config == nil || config.gestureEnabled);
|
||||
return _controller.viewControllers.count > 1 && topScreen.gestureEnabled;
|
||||
}
|
||||
|
||||
- (void)markChildUpdated
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
@property (nonatomic) BOOL hideBackButton;
|
||||
@property (nonatomic) BOOL hideShadow;
|
||||
@property (nonatomic) BOOL translucent;
|
||||
@property (nonatomic) BOOL gestureEnabled;
|
||||
|
||||
+ (void)willShowViewController:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig*)config;
|
||||
|
||||
|
||||
@@ -20,34 +20,26 @@
|
||||
@end
|
||||
|
||||
|
||||
@interface RNSScreenHeaderItemMeasurements : NSObject
|
||||
@property (nonatomic, readonly) CGSize headerSize;
|
||||
@property (nonatomic, readonly) CGFloat leftPadding;
|
||||
@property (nonatomic, readonly) CGFloat rightPadding;
|
||||
|
||||
- (instancetype)initWithHeaderSize:(CGSize)headerSize leftPadding:(CGFloat)leftPadding rightPadding:(CGFloat)rightPadding;
|
||||
@end
|
||||
|
||||
@implementation RNSScreenHeaderItemMeasurements
|
||||
|
||||
- (instancetype)initWithHeaderSize:(CGSize)headerSize leftPadding:(CGFloat)leftPadding rightPadding:(CGFloat)rightPadding
|
||||
{
|
||||
if (self = [super init]) {
|
||||
_headerSize = headerSize;
|
||||
_leftPadding = leftPadding;
|
||||
_rightPadding = rightPadding;
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@interface RNSScreenStackHeaderSubview : UIView
|
||||
|
||||
@property (nonatomic, weak) RCTBridge *bridge;
|
||||
@property (nonatomic, weak) UIView *reactSuperview;
|
||||
@property (nonatomic) RNSScreenStackHeaderSubviewType type;
|
||||
|
||||
- (instancetype)initWithBridge:(RCTBridge*)bridge;
|
||||
|
||||
@end
|
||||
|
||||
@implementation RNSScreenStackHeaderSubview
|
||||
|
||||
- (instancetype)initWithBridge:(RCTBridge *)bridge
|
||||
{
|
||||
if (self = [super init]) {
|
||||
_bridge = bridge;
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@implementation RNSScreenStackHeaderConfig {
|
||||
@@ -60,7 +52,6 @@
|
||||
self.hidden = YES;
|
||||
_translucent = YES;
|
||||
_reactSubviews = [NSMutableArray new];
|
||||
_gestureEnabled = YES;
|
||||
}
|
||||
return self;
|
||||
}
|
||||
@@ -96,7 +87,16 @@
|
||||
{
|
||||
UIViewController *vc = _screenView.controller;
|
||||
UINavigationController *nav = (UINavigationController*) vc.parentViewController;
|
||||
if (vc != nil && nav.visibleViewController == vc) {
|
||||
UIViewController *nextVC = nav.visibleViewController;
|
||||
if (nav.transitionCoordinator != nil) {
|
||||
// if navigator is performing transition instead of allowing to update of `visibleConttroller`
|
||||
// we look at `topController`. This is because during transitiong the `visibleController` won't
|
||||
// point to the controller that is going to be revealed after transition. This check fixes the
|
||||
// problem when config gets updated while the transition is ongoing.
|
||||
nextVC = nav.topViewController;
|
||||
}
|
||||
|
||||
if (vc != nil && nextVC == vc) {
|
||||
[RNSScreenStackHeaderConfig updateViewController:self.screenView.controller withConfig:self];
|
||||
}
|
||||
}
|
||||
@@ -269,7 +269,7 @@
|
||||
[navctr setNavigationBarHidden:shouldHide animated:YES];
|
||||
#ifdef __IPHONE_13_0
|
||||
if (@available(iOS 13.0, *)) {
|
||||
vc.modalInPresentation = !config.gestureEnabled;
|
||||
vc.modalInPresentation = !config.screenView.gestureEnabled;
|
||||
}
|
||||
#endif
|
||||
if (shouldHide) {
|
||||
@@ -395,17 +395,22 @@
|
||||
}
|
||||
case RNSScreenStackHeaderSubviewTypeCenter:
|
||||
case RNSScreenStackHeaderSubviewTypeTitle: {
|
||||
subview.translatesAutoresizingMaskIntoConstraints = NO;
|
||||
navitem.titleView = subview;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (vc.transitionCoordinator != nil && !wasHidden) {
|
||||
[vc.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
|
||||
|
||||
} completion:nil];
|
||||
if (vc.transitionCoordinator != nil
|
||||
&& vc.transitionCoordinator.presentationStyle == UIModalPresentationNone
|
||||
&& !wasHidden) {
|
||||
// when there is an ongoing transition we may need to update navbar setting in animation block
|
||||
// using animateAlongsideTransition. However, we only do that given the transition is not a modal
|
||||
// transition (presentationStyle == UIModalPresentationNone) and that the bar was not previously
|
||||
// hidden. This is because both for modal transitions and transitions from screen with hidden bar
|
||||
// the transition animation block does not get triggered. This is ok, because with both of those
|
||||
// types of transitions there is no "shared" navigation bar that needs to be updated in an animated
|
||||
// way.
|
||||
[vc.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
|
||||
[self setAnimatedConfig:vc withConfig:config];
|
||||
} completion:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
|
||||
@@ -454,7 +459,6 @@ RCT_EXPORT_VIEW_PROPERTY(hideShadow, BOOL)
|
||||
// `hidden` is an UIView property, we need to use different name internally
|
||||
RCT_REMAP_VIEW_PROPERTY(hidden, hide, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
|
||||
RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
|
||||
|
||||
@end
|
||||
|
||||
@@ -470,67 +474,6 @@ RCT_ENUM_CONVERTER(RNSScreenStackHeaderSubviewType, (@{
|
||||
|
||||
@end
|
||||
|
||||
@implementation RNSScreenStackHeaderSubview
|
||||
|
||||
- (instancetype)initWithBridge:(RCTBridge *)bridge
|
||||
{
|
||||
if (self = [super init]) {
|
||||
_bridge = bridge;
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
- (void)layoutSubviews
|
||||
{
|
||||
[super layoutSubviews];
|
||||
if (!self.translatesAutoresizingMaskIntoConstraints) {
|
||||
CGSize size = self.superview.frame.size;
|
||||
CGFloat right = size.width - self.frame.size.width - self.frame.origin.x;
|
||||
CGFloat left = self.frame.origin.x;
|
||||
[_bridge.uiManager
|
||||
setLocalData:[[RNSScreenHeaderItemMeasurements alloc]
|
||||
initWithHeaderSize:size
|
||||
leftPadding:left rightPadding:right]
|
||||
forView:self];
|
||||
}
|
||||
}
|
||||
|
||||
- (void)reactSetFrame:(CGRect)frame
|
||||
{
|
||||
if (self.translatesAutoresizingMaskIntoConstraints) {
|
||||
[super reactSetFrame:frame];
|
||||
}
|
||||
}
|
||||
|
||||
- (CGSize)intrinsicContentSize
|
||||
{
|
||||
return UILayoutFittingExpandedSize;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@interface RNSScreenStackHeaderSubviewShadow : RCTShadowView
|
||||
@end
|
||||
|
||||
@implementation RNSScreenStackHeaderSubviewShadow
|
||||
|
||||
- (void)setLocalData:(RNSScreenHeaderItemMeasurements *)data
|
||||
{
|
||||
self.width = (YGValue){data.headerSize.width - data.leftPadding - data.rightPadding, YGUnitPoint};
|
||||
self.height = (YGValue){data.headerSize.height, YGUnitPoint};
|
||||
|
||||
if (data.leftPadding > data.rightPadding) {
|
||||
self.paddingLeft = (YGValue){0, YGUnitPoint};
|
||||
self.paddingRight = (YGValue){data.leftPadding - data.rightPadding, YGUnitPoint};
|
||||
} else {
|
||||
self.paddingLeft = (YGValue){data.rightPadding - data.leftPadding, YGUnitPoint};
|
||||
self.paddingRight = (YGValue){0, YGUnitPoint};
|
||||
}
|
||||
[self didSetProps:@[@"width", @"height", @"paddingLeft", @"paddingRight"]];
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@implementation RNSScreenStackHeaderSubviewManager
|
||||
|
||||
RCT_EXPORT_MODULE()
|
||||
@@ -542,9 +485,4 @@ RCT_EXPORT_VIEW_PROPERTY(type, RNSScreenStackHeaderSubviewType)
|
||||
return [[RNSScreenStackHeaderSubview alloc] initWithBridge:self.bridge];
|
||||
}
|
||||
|
||||
- (RCTShadowView *)shadowView
|
||||
{
|
||||
return [RNSScreenStackHeaderSubviewShadow new];
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-native-screens",
|
||||
"version": "2.0.0-alpha.29",
|
||||
"version": "2.0.0-beta.2",
|
||||
"description": "First incomplete navigation solution for your react-native app.",
|
||||
"scripts": {
|
||||
"start": "node node_modules/react-native/local-cli/cli.js start",
|
||||
|
||||
20
src/screens.d.ts
vendored
20
src/screens.d.ts
vendored
@@ -3,7 +3,13 @@
|
||||
|
||||
declare module 'react-native-screens' {
|
||||
import { ComponentClass } from 'react';
|
||||
import { ViewProps, Animated, NativeSyntheticEvent, NativeTouchEvent, ImageProps } from 'react-native';
|
||||
import {
|
||||
ViewProps,
|
||||
Animated,
|
||||
NativeSyntheticEvent,
|
||||
NativeTouchEvent,
|
||||
ImageProps,
|
||||
} from 'react-native';
|
||||
|
||||
export function useScreens(shouldUseScreens?: boolean): void;
|
||||
export function enableScreens(shouldEnableScreens?: boolean): void;
|
||||
@@ -35,11 +41,14 @@ declare module 'react-native-screens' {
|
||||
* @type "none" – the screen appears/dissapears without an animation
|
||||
*/
|
||||
stackAnimation?: StackAnimationTypes;
|
||||
/**
|
||||
* @description When set to false the back swipe gesture will be disabled when the parent Screen is on top of the stack. The default value is true.
|
||||
*/
|
||||
gestureEnabled?: boolean;
|
||||
}
|
||||
|
||||
|
||||
export type ScreenContainerProps = ViewProps;
|
||||
|
||||
|
||||
export interface ScreenStackProps extends ViewProps {
|
||||
transitioning?: number;
|
||||
progress?: number;
|
||||
@@ -82,10 +91,6 @@ declare module 'react-native-screens' {
|
||||
* @description If set to true the back button will not be rendered as a part of navigation header.
|
||||
*/
|
||||
hideBackButton?: boolean;
|
||||
/**
|
||||
* @description When set to false the back swipe gesture will be disabled when the parent Screen is on top of the stack. The default value is true.
|
||||
*/
|
||||
gestureEnabled?: boolean;
|
||||
/**
|
||||
* @host (iOS only)
|
||||
* @description When set to true, it makes native navigation bar on iOS semi transparent with blur effect. It is a common way of presenting navigation bar introduced in iOS 11. The default value is false
|
||||
@@ -135,7 +140,6 @@ declare module 'react-native-screens' {
|
||||
export const ScreenStackHeaderBackButtonImage: ComponentClass<ImageProps>;
|
||||
export const ScreenStackHeaderLeftView: ComponentClass<ViewProps>;
|
||||
export const ScreenStackHeaderRightView: ComponentClass<ViewProps>;
|
||||
export const ScreenStackHeaderTitleView: ComponentClass<ViewProps>;
|
||||
export const ScreenStackHeaderConfig: ComponentClass<
|
||||
ScreenStackHeaderConfigProps
|
||||
>;
|
||||
|
||||
@@ -171,14 +171,6 @@ const ScreenStackHeaderLeftView = props => (
|
||||
/>
|
||||
);
|
||||
|
||||
const ScreenStackHeaderTitleView = props => (
|
||||
<ScreensNativeModules.NativeScreenStackHeaderSubview
|
||||
{...props}
|
||||
type="title"
|
||||
style={styles.headerSubview}
|
||||
/>
|
||||
);
|
||||
|
||||
const ScreenStackHeaderCenterView = props => (
|
||||
<ScreensNativeModules.NativeScreenStackHeaderSubview
|
||||
{...props}
|
||||
@@ -210,7 +202,6 @@ module.exports = {
|
||||
ScreenStackHeaderBackButtonImage,
|
||||
ScreenStackHeaderRightView,
|
||||
ScreenStackHeaderLeftView,
|
||||
ScreenStackHeaderTitleView,
|
||||
ScreenStackHeaderCenterView,
|
||||
|
||||
enableScreens,
|
||||
|
||||
Reference in New Issue
Block a user