ネイティブナビゲーションv2の問題に反応します。
私のアプリはindex.jsで始まり、AppDelegateにも登録されます。詳細は次のとおりです。
import { AppRegistry } from 'react-native'; const { start } = require('./src/app'); start();
ここでapp.js:
`` `
const { Navigation } = require('react-native-navigation');
const { registerScreens } = require('./screens');
const { Platform } = require('react-native');
if (Platform.OS === 'Android') {
alert = (title) => {
Navigation.showOverlay({
component: {
name: 'navigation.playground.alert',
passProps: {
title
},
options: {
overlay: {
interceptTouchOutside: true
}
}
}
});
};
}
function start() {
registerScreens();
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions({
_animations: {
startApp: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'accelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'accelerate'
}
},
Push: {
topBar: {
id: 'TEST',
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'accelerate'
}
},
bottomTabs: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'decelerate'
}
},
bottomTabs: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'decelerate'
}
},
content: {
y: {
from: 1000,
to: 0,
duration: 500,
interpolation: 'accelerate',
},
alpha: {
from: 0,
to: 1,
duration: 500,
interpolation: 'accelerate'
}
}
},
pop: {
topBar: {
id: 'TEST',
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'accelerate'
}
},
bottomTabs: {
y: {
from: 0,
to: 100,
duration: 500,
interpolation: 'accelerate',
},
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'accelerate'
}
},
bottomTabs: {
y: {
from: 0,
to: 100,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'decelerate'
}
},
content: {
y: {
from: 0,
to: 1000,
duration: 500,
interpolation: 'decelerate',
},
alpha: {
from: 1,
to: 0,
duration: 500,
interpolation: 'decelerate'
}
}
}
}
});
Navigation.setRoot({
root: {
stack: {
id: 'TEST',
children: [
{
component: {
name: 'rp.welcome'
}
}
]
}
}
});
});
}
module.exports = {
start
};
画面登録:
const { Navigation } = require('react-native-navigation');
const WelcomeScreen = require('./WelcomeScreen');
const Authentication = require('./Authentication').default;
const Tutorial = require('./Tutorial');
function registerScreens() {
Navigation.registerComponent(`rp.welcome`, () => WelcomeScreen);
Navigation.registerComponent(`rp.tutorial`, ()=>Tutorial);
Navigation.registerComponent(`rp.authentication.super`,()=> Authentication);
}
module.exports = {
registerScreens
};
環境:
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-navigation": "^2.0.2314",
"react-native-video": "^2.1.1",
"rn-viewpager": "^1.2.9"
},
V2でも同様の問題が発生しましたが、AppDelegate.mのdidFinishLaunchingWithOptions
メソッドのrootView設定を削除しないことが原因でした。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"XXXXXXXXXX"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
そのままにしておくと、アプリケーションXXXXXXXXXXが登録されていないというエラーが発生します。 IOS https://wix.github.io/react-native-navigation/v2/#/docs/Installing の手順は、これらのrootView関連行を強調する必要があります削除する必要があります。
正しいAppDelegates.mは次のようになります。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
return YES;
}
私は同じ問題を抱えていましたが、Androidのみでした。構成プロセスのステップを見逃していたことがわかりました。
MainActivity.Javaでは、ReactActivityではなくcom.reactnativenavigation.NavigationActivityを拡張する必要があります。
https://wix.github.io/react-native-navigation/v2/#/docs/Installing 。
IOSでも同じ問題がありました。私の場合、info.plistのxcodeで「バンドル表示名」の名前を変更するだけで解決します。何らかの理由でNavigation.events()。registerAppLaunchedListener(()=> {...})はアプリを登録できませんでした。「バンドルの表示名」を変更するだけで問題が解決します。
次のようにコンポーネントの文字列名を入力することでこれを解決しました。
の代わりに: component: YourComponent
そのはず:
component: {
name: 'YourComponent'
}
以下の完全なコード:
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'YourComponent'
}
}
]
}
}
})
});
また、PushまたはsetStackRootを使用する場合は、常にコンポーネント名を使用する必要があります。
component: {
name: 'YourComponent'
}