Циклическая зависимость возвращает пустой объект в React Native
У меня есть два React Native Components (альфа и бета), которые перемещаются друг к другу; однако это создает циклическую зависимость, и React Native, похоже, не справляется с ними.
Требование бета-версии в альфа-версии работает нормально, но требование альфа-версии в бета-версии возвращает пустой объект. При попытке протолкнуть маршрут с недопустимым компонентом выдается ошибка.
Могут ли циклические зависимости работать в React Native? Если нет, как мне обойти это?
Кодindex.ios.js
'use strict';
var React = require('react-native');
var Alpha = require('./Alpha');
var {
AppRegistry,
NavigatorIOS,
StyleSheet,
Text,
View,
} = React;
var ExampleProject = React.createClass({
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
component: Alpha,
title: Alpha.title,
wrapperStyle: styles.wrapper
}} />
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white'
},
wrapper: {
paddingTop: 64
}
});
AppRegistry.registerComponent('ExampleProject', () => ExampleProject);
Alpha.js
'use strict';
var React = require('react-native');
var Beta = require('./Beta');
var {
StyleSheet,
TouchableHighlight,
View,
Text
} = React;
var Alpha = React.createClass({
statics: {
title: 'Alpha'
},
goToBeta() {
this.props.navigator.push({
component: Beta,
title: Beta.title,
wrapperStyle: styles.wrapper
});
},
render() {
return (
<View>
<TouchableHighlight style={styles.linkWrap}
onPress={this.goToBeta}>
<Text>Go to Beta</Text>
</TouchableHighlight>
</View>
);
}
});
var styles = StyleSheet.create({
linkWrap: {
flex: 1,
alignItems: 'center',
padding: 30
},
wrapper: {
paddingTop: 64
}
});
module.exports = Alpha;
Beta.js
'use strict';
var React = require('react-native');
var Alpha = require('./Alpha');
var {
StyleSheet,
TouchableHighlight,
View,
Text
} = React;
var Beta = React.createClass({
statics: {
title: 'Beta'
},
goToAlpha() {
this.props.navigator.push({
component: Alpha,
title: Alpha.title,
wrapperStyle: styles.wrapper
});
},
render() {
return (
<View>
<TouchableHighlight style={styles.linkWrap}
onPress={this.goToAlpha}>
<Text>Go to Alpha</Text>
</TouchableHighlight>
</View>
);
}
});
var styles = StyleSheet.create({
linkWrap: {
flex: 1,
alignItems: 'center',
padding: 30
},
wrapper: {
paddingTop: 64
}
});
module.exports = Beta;