2
react-native 및 react-native-navigation을 사용하여 간단한 응용 프로그램을 만들려고합니다. 문제가있는 곳을 확인하기 위해 repo에서 예제를 다운로드하여 사용 가이드를 살펴 보았지만 모든 것이 정상인 것처럼 보입니다.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 ' Android와 iOS가 아닌 건물에 대한 건물입니다. 코드는 아래와 같습니다. 모든 포인터를 환영 :
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'
}
});