Daniel Zlotin a342dbd64d fixed releases | 7 anos atrás | |
---|---|---|
.github | 7 anos atrás | |
AndroidE2E | 7 anos atrás | |
docs | 7 anos atrás | |
e2e | 7 anos atrás | |
integration | 7 anos atrás | |
lib | 7 anos atrás | |
playground | 7 anos atrás | |
scripts | 7 anos atrás | |
.eslintrc | 7 anos atrás | |
.gitignore | 8 anos atrás | |
.npmignore | 7 anos atrás | |
.travis.yml | 7 anos atrás | |
.watchmanconfig | 8 anos atrás | |
CONTRIBUTING.md | 7 anos atrás | |
INSTALLING.md | 7 anos atrás | |
LICENSE | 7 anos atrás | |
README.md | 7 anos atrás | |
ReactNativeNavigation.podspec | 7 anos atrás | |
UPDATING.md | 7 anos atrás | |
jsconfig.json | 7 anos atrás | |
package.json | 7 anos atrás | |
v1tov2diff.md | 7 anos atrás | |
wallaby.js | 7 anos atrás | |
yarn.lock | 7 anos atrás |
We are rebuilding react-native-navigation
react-native-navigation has a few issues which are unsolvable in it’s current architecture.
These issues originate 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. This covers most use cases but there are some edge cases:
There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
To solve this problem in v2, every screen receives as a prop it’s containerId. Whenever you want to perform an action from that screen you need to pass the containerId to the function:
Navigator.pop(this.props.containerId)
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.
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.
v2 currently supports most of react-native-navigation’s basic functions but it is still behind v1. Here is the full comparison of features between v1 and v2 (will be updated regulary):
API | v1 | v2 |
---|---|---|
startTabBasedApp | ✅ | ✅ |
startSinglePageApp | ✅ | ✅ |
registerScreen | ✅ | ✅ |
drawer | ✅ | ✅ |
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 |
setButtons | ✅ | Contribute | Contribute |
setTitle | ✅ | ✅ | ✅ |
toggleDrawer | ✅ | Contribute | Contribute |
toggleTabs | ✅ | in development | Contribute |
setTabBadge | ✅ | Contribute | Contribute |
switchToTab | ✅ | in development | Contribute |
toggleNavBar | ✅ | Contribute | Contribute |
Screen Visibility | ✅ | ✅ | ✅ |
Note: properties who begin with ‘navBar’ in v1 are now named ‘topBar’ to avoid confusion with the android native bottom nav bar.
v1 | v2 iOS | v2 Android | |
---|---|---|---|
topBarBackgroundColor | ✅ | in development | Contribute |
topBarTextFontSize | ✅ | in development | Contribute |
topBarTextFontFamily | ✅ | in development | Contribute |
topBarBackgroundColor | ✅ | in development | Contribute |
topBarButtonColor | ✅ | in development | Contribute |
topBarHidden | ✅ | in development | Contribute |
topBarHideOnScroll | ✅ | in development | Contribute |
topBarTranslucent | ✅ | in development | Contribute |
topBarTransparent | ✅ | in development | Contribute |
topBarNoBorder | ✅ | Contribute | Contribute |
drawUnderTabBar | ✅ | Contribute | Contribute |
drawUnderTopBar | ✅ | Contribute | Contribute |
statusBarBlur | ✅ | Contribute | Contribute |
topBarBlur | ✅ | Contribute | Contribute |
tabBarHidden | ✅ | Contribute | Contribute |
statusBarTextColorScheme | ✅ | in development | / iOS specific |
statusBarTextColorSchemeSingleScreen | ✅ | in development | / iOS specific |
navBarSubtitleColor | ✅ | Contribute | Contribute |
navBarSubtitleFontFamily | ✅ | Contribute | Contribute |
screenBackgroundColor | ✅ | in development | Contribute |
orientation | ✅ | Contribute | Contribute |
statusBarHideWithTopBar | ✅ | Contribute | Contribute |
statusBarHidden | ✅ | Contribute | Contribute |
disabledBackGesture | ✅ | Contribute | / iOS specific |
screenBackgroundImageName | ✅ | Contribute | Contribute |
rootBackgroundImageName | ✅ | Contribute | Contribute |
Element tranisitions, adding buttons and styles are not yet implemented. Contribute
If v2 supports everything you need for your app we encourage you to use it.
Download react-native-navigation v2
yarn add react-native-navigation@alpha
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)
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)
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)
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];
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/')
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')
}
In MainActivity.java
it should extend com.reactnativenavigation.controllers.SplashActivity
instead of ReactActivity
.
This file can be located in android/app/src/main/java/com/yourproject/
.
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends SplashActivity {
}
If you have any react-native related methods, you can safely delete them.
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()
);
}
@Override
public List<ReactPackage> createAdditionalReactPackages() {
return getPackages();
}
}
Make sure that isDebug
and createAdditionalReactPackages
methods are implemented.
Update AndroidManifest.xml
and set android:name value to .MainApplication
```xml
<application
android:name=".MainApplication"
...
/>
import Navigation from 'react-native-navigation';
How to initiate your app.
Navigation.events().onAppLaunched(() => {
Navigation.setRoot({
container: {
name: 'navigation.playground.WelcomeScreen'
}
});
});
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);
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'
}
}
}
]
});
Push a new screen into this screen’s navigation stack.
Navigation.push(this.props.containerId, {
name: 'navigation.playground.PushedScreen',
passProps: {}
});
Pop the top screen from this screen’s navigation stack.
Navigation.pop(this.props.containerId);
Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
Pop all the screens until the root from this screen’s navigation stack
Navigation.popToRoot(this.props.containerId);
Show a screen as a modal.
Navigation.showModal({
container: {
name: 'navigation.playground.ModalScreen',
passProps: {
key: 'value'
}
}
});
Dismiss modal.
Navigation.dismissModal(this.props.containerId);
Dismiss all the current modals at the same time.
Navigation.dismissAllModals();
The onStop() and onStart() 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'
};
}
onStart() {
this.setState({ text: 'onStart' });
}
onStop() {
alert('onStop'); //eslint-disable-line
}
componentWillUnmount() {
alert('componentWillUnmount'); //eslint-disable-line
}
render() {
return (
<View style={styles.root}>
<Text style={styles.h1}>{`Lifecycle Screen`}</Text>
<Text style={styles.h1}>{this.state.text}</Text>
</View>
);
}
}