2
私はreact-nativeとreact-native-navigationを使用して簡単なアプリケーションを作成しようとしています。私は、問題がどこにあるかを見てみるためにレポ内のサンプルをダウンロードして使用しましたが、すべてが正常です。React-Native-Navigation：使用されていませんが未登録です
しかし、アプリケーションが起動すると、次のエラーが生成されます。
Navigation.getRegisteredScreen：使用されていますが、まだ登録されていません。
私は、画面の登録を見てきましたが、例や使用方法のガイド内よりも、その実装には違いがありません。..
バージョン情報：
"react": "16.0.0-alpha.6",
"react-native": "0.43.0",
"react-native-elements": "^0.10.3",
"react-native-navigation": "^1.0.30",
"react-native-vector-icons": "^4.0.0"
現在、I」 iOSではなくAndroidからビルドしています。コードは以下のとおりです。最も歓迎任意のポインタ：
index.android.js
import App from './src/app';
app.js
import {
Platform
} from 'react-native';
import {Navigation} from 'react-native-navigation';
//Screen related book keeping
import {registerScreens} from './screens';
registerScreens();
//Create and store tab reference for use within Navigation constructor
const createTabs =() => {
let tabs = [
{
label: 'One',
screens: 'TestApp.HomeScreen',
icon: require('../img/one.png'),
selectedIcon: require('../img/one_selected.png'),
title: 'Home'
},
{
label: 'Two',
screens: 'TestApp.CodeScreen',
icon: require('../img/two.png'),
selectedIcon: require('../img/two_selected.png'),
title: 'Codes'
},
];
return tabs;
};
//this will start the app
Navigation.startTabBasedApp({
tabs: createTabs(),
tabsStyle: {
tabBarBackgroundColor: '#0f2362',
tabBarButtonColor: '#ffffff',
tabBarSelectedButtonColor: '#63d7cc'
},
appStyle: {
orientation: 'portrait'
},
});
/src/screens/index.android.js
import { Navigation } from 'react-native-navigation';
import HomeScreen from './HomeScreen';
import CodeScreen from './CodeScreen';
// register all screens of the app (including internal ones)
export function registerScreens() {
Navigation.registerComponent('TestApp.HomeScreen',() => HomeScreen);
Navigation.registerComponent('TestApp.CodeScreen',() => CodeScreen);
}
/src/screens/CodeScreen.js
import React, { Component } from 'react';
import {
Text,
View,
ScrollView,
TouchableOpacity,
StyleSheet,
Alert
} from 'react-native';
import { Navigation, Screen } from 'react-native-navigation';
export default class CodeScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity>
<Text style={styles.button}>Change Buttons</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>Change Title</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>Switch To Tab#1</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>Set Tab Badge</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>Toggle Tabs</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white'
},
button: {
textAlign: 'center',
fontSize: 18,
marginBottom: 10,
marginTop:10,
color: 'blue'
}
});
/src/screens/HomeScreen.js
import React, { Component } from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Alert,
Platform
} from 'react-native';
import { Navigation, Screen } from 'react-native-navigation';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
// if you want to listen on navigator events, set this up
}
render() {
return (
<View style={{flex: 1, padding: 20}}>
<TouchableOpacity>
<Text style={styles.button}>Push Plain Screen</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>Push Styled Screen</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>Show Modal Screen</Text>
</TouchableOpacity>
{
Platform.OS === 'ios' ?
<TouchableOpacity>
<Text style={styles.button}>Show LightBox</Text>
</TouchableOpacity> : false
}
{
Platform.OS === 'ios' ?
<TouchableOpacity>
<Text style={styles.button}>Show In-App Notification</Text>
</TouchableOpacity> : false
}
<TouchableOpacity>
<Text style={styles.button}>Show Single Screen App</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
textAlign: 'center',
fontSize: 18,
marginBottom: 10,
marginTop: 10,
color: 'blue'
}
});