react-native-navigation的迁移库
yogevbd 97272fb3c1 V2 Orientation (#1686) hace 7 años
.github update remx hace 7 años
AndroidE2E Renamed container lifecycle events (#1676) hace 7 años
docs Add basic docs files (#1156) hace 7 años
e2e V2 Orientation (#1686) hace 7 años
integration move to moduleJS hace 7 años
lib V2 Orientation (#1686) hace 7 años
playground V2 Orientation (#1686) hace 7 años
scripts removed yarn dependency, npm is fast enough hace 7 años
.gitignore update gitignore hace 8 años
.npmignore update npmignore hace 7 años
.travis.yml removed yarn dependency, npm is fast enough hace 7 años
.watchmanconfig deleted old redux example, using yarn, update package.json to alpha hace 8 años
CONTRIBUTING.md removed yarn dependency, npm is fast enough hace 7 años
INSTALLING.md removed yarn dependency, npm is fast enough hace 7 años
LICENSE Update LICENSE hace 7 años
README.md topBarBlur for ios (#1760) hace 7 años
ReactNativeNavigation.podspec update podspec hace 7 años
UPDATING.md trigger build hace 7 años
jsconfig.json app lifecycle hace 7 años
package-lock.json removed yarn dependency, npm is fast enough hace 7 años
package.json fix \#919 hace 7 años
v1tov2diff.md removed yarn dependency, npm is fast enough hace 7 años
wallaby.js fix \#919 hace 7 años

README.md

Build Status Join us on Discord

React Native Navigation v2 (WIP)

We are rebuilding react-native-navigation

Why Rebuild react-native-navigation?

A New & Improved Core Architecture

react-native-navigation has a few issues which are unsolvable in its current architecture. These issues stem from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push a screen, show a modal or any other action, the action defaults to originate from your current screen. In most cases this is fine, but becoms problematic in specific edge cases. For example:

  • What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
  • What if you want to push a screen as a result of a redux action?

There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.

New API

To solve this problem in v2, every screen receives its containerId as a prop. Whenever you want to perform an action from that screen you need to pass the containerId to the function:

Navigator.pop(this.props.containerId)

Built for Contributors

Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested.
v2 is written with contributors in mind from day one.

Written In TDD

v2 is written in Test Driven Development. We have a test for every feature including features that are not implemented yet. This makes accepting pull requests extremely easy: If our tests pass, your pull request is accepted.

Current Status

v2 currently supports most of react-native-navigation’s basic functionality but it is still behind v1. Here is the full comparison of features between v1 and v2 (will be updated regularly):

Top Level API

API v1 v2
startTabBasedApp
startSinglePageApp
registerScreen
drawer

Screen API

 API              v1 v2 iOS v2 Android
push
pop
showModal
popToRoot
resetTo
dismissModal
dismissAllModals
showContextualMenu / Android specific Contribute
dismissContextualMenu / Androic specific Contribute
showFab / Android specific Contribute
dismissFab / Android specific Contribute
showSnackBar / Android specific Contribute
dismissSnackBar / Android specific Contribute
showLightBox Contribute Contribute
dismissLightBox Contribute Contribute
handleDeepLink Contribute Contribute
Screen Visibility

Styles

Note: v1 properties with names beginning with ‘navBar’ are replaced in v2 with properties beginning with ‘topBar’ to avoid confusion with the Android native bottom nav bar.

v1 v2 iOS v2 Android Contributors
topBarTextColor Contribute Wix
topBarTextFontSize Contribute Wix
topBarTextFontFamily Contribute Wix
topBarBackgroundColor Wix
topBarButtonColor Contribute Wix
topBarHidden Contribute Wix
topBarHideOnScroll Contribute Wix
topBarTranslucent Contribute Wix
topBarTransparent WIP @bogobogo Contribute
topBarNoBorder Contribute @gtchance
drawUnderTabBar WIP @gran33 Contribute
drawUnderTopBar WIP @gran33 Contribute
statusBarBlur Contribute @gtchance
topBarBlur Contribute @gtchance
tabBarHidden Contribute @gtchance
statusBarTextColorScheme in development / iOS specific
statusBarTextColorSchemeSingleScreen in development / iOS specific
navBarSubtitleColor Contribute Contribute
navBarSubtitleFontFamily Contribute Contribute
screenBackgroundColor Contribute Wix
orientation WIP @yogevbd Contribute
statusBarHideWithTopBar Contribute @gtchance
statusBarHidden Contribute WIX
disabledBackGesture WIP @gran33 / iOS specific
screenBackgroundImageName Contribute Contribute
rootBackgroundImageName Contribute Contribute
setButtons Contribute @Johan-dutoit
title Wix
toggleDrawer Contribute Contribute
toggleTabs in development in development
setTabBadge Contribute Wix
switchToTab in development Contribute
toggleNavBar WIP @gran33 Contribute
navBarCustomView WIP @gran33 Contribute
customTransition(shared element) :x: WIP @bogobogo Contribute
splitViewScreen :x: Contribute Contribute

Element tranisitions, adding buttons and styles are not yet implemented. Contribute

Getting started with v2

If v2 supports everything you need for your app we encourage you to use it.

Installation

  1. Download react-native-navigation v2

    npm install --save react-native-navigation@alpha
    
    iOS
  2. In Xcode, in Project Navigator (left pane), right-click on the Libraries > Add files to [project name]. Add ./node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj (screenshots)

  3. In Xcode, in Project Navigator (left pane), click on your project (top) and select the Build Phases tab (right pane). In the Link Binary With Libraries section add libReactNativeNavigation.a (screenshots)

  4. In Xcode, in Project Navigator (left pane), click on your project (top) and select the Build Settings tab (right pane). In the Header Search Paths section add $(SRCROOT)/../node_modules/react-native-navigation/lib/ios. Make sure on the right to mark this new path recursive (screenshots)

  5. In Xcode, under your project files, modify AppDelegate.m. add:

#import <ReactNativeNavigation/ReactNativeNavigation.h>

remove everything in the method didFinishLaunchingWithOptions and add:

NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
Android
  1. Add the following in android/settings.gradle.

    include ':react-native-navigation'
    project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
    
  2. Update project dependencies in android/app/build.gradle.

    android {
        compileSdkVersion 25
        buildToolsVersion "25.0.1"
        ...
    }
    
    dependencies {
        compile fileTree(dir: "libs", include: ["*.jar"])
        compile "com.android.support:appcompat-v7:23.0.1"
        compile "com.facebook.react:react-native:+"
        compile project(':react-native-navigation')
    }
    
  3. In MainActivity.java it should extend com.reactnativenavigation.NavigationActivity instead of ReactActivity.

    This file can be located in android/app/src/main/java/com/yourproject/.

    import com.reactnativenavigation.NavigationActivity;
    
    public class MainActivity extends NavigationActivity {
    
    }
    

    If you have any react-native related methods, you can safely delete them.

  4. In MainApplication.java, add the following

    import com.reactnativenavigation.NavigationApplication;
    
    public class MainApplication extends NavigationApplication {
    
        @Override
        public boolean isDebug() {
            // Make sure you are using BuildConfig from your own application
            return BuildConfig.DEBUG;
        }
    
        protected List<ReactPackage> getPackages() {
            // Add additional packages you require here
            // No need to add RnnPackage and MainReactPackage
            return Arrays.<ReactPackage>asList(
                // eg. new VectorIconsPackage()
            );
        }
    }
    

    Make sure that isDebug methods is implemented.

  5. Update AndroidManifest.xml and set android:name value to .MainApplication ```xml <application

    android:name=".MainApplication"
    ...
    

    />

    Usage

    Top Screen API

Navigation

import Navigation from 'react-native-navigation';

Events - On App Launched

How to initiate your app.

Navigation.events().onAppLaunched(() => {
    Navigation.setRoot({
      container: {
        name: 'navigation.playground.WelcomeScreen'
      }
    });
  });

registerContainer(screenID, generator)

Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.

Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);

setRoot({params})

Start a Single page app with two side menus:

Navigation.setRoot({
      container: {
        name: 'navigation.playground.WelcomeScreen'
      },
      sideMenu: {
        left: {
          container: {
            name: 'navigation.playground.TextScreen',
            passProps: {
              text: 'This is a left side menu screen'
            }
          }
        },
        right: {
          container: {
            name: 'navigation.playground.TextScreen',
            passProps: {
              text: 'This is a right side menu screen'
            }
          }
        }
      }
    });

Start a tab based app:

Navigation.setRoot({
      tabs: [
        {
          container: {
            name: 'navigation.playground.TextScreen',
            passProps: {
              text: 'This is tab 1',
              myFunction: () => 'Hello from a function!'
            }
          }
        },
        {
          container: {
            name: 'navigation.playground.TextScreen',
            passProps: {
              text: 'This is tab 2'
            }
          }
        }
      ]
    });

Screen API

push(params)

Push a new screen into this screen’s navigation stack.

Navigation.push(this.props.containerId, {
      name: 'navigation.playground.PushedScreen',
      passProps: {}
    });

pop(containerId)

Pop the top screen from this screen’s navigation stack.

Navigation.pop(this.props.containerId);

popTo(params)

Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);

popToRoot()

Pop all the screens until the root from this screen’s navigation stack

Navigation.popToRoot(this.props.containerId);

showModal(params = {})

Show a screen as a modal.

Navigation.showModal({
      container: {
        name: 'navigation.playground.ModalScreen',
        passProps: {
            key: 'value'
        }
      }
    });

dismissModal(containerId)

Dismiss modal.

Navigation.dismissModal(this.props.containerId);

dismissAllModals()

Dismiss all the current modals at the same time.

Navigation.dismissAllModals();

Screen Lifecycle - didDisappear() and didAppear()

The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:

class LifecycleScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'nothing yet'
    };
  }

  didAppear() {
    this.setState({ text: 'didAppear' });
  }

  didDisappear() {
    alert('didDisappear');
  }

  componentWillUnmount() {
    alert('componentWillUnmount');
  }

  render() {
    return (
      <View style={styles.root}>
        <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
	<Text style={styles.h1}>{this.state.text}</Text>
      </View>
    );
  }
}