A dependência cíclica retorna o objeto vazio no React Native
Eu tenho dois React Native Components (Alpha e Beta) que navegam um para o outro; no entanto, isso produz uma dependência cíclica e o React Native parece não lidar com isso.
Requerer Beta no Alpha funciona bem, mas exigir Alpha no Beta retorna um objeto vazio. Um erro é gerado ao tentar enviar uma rota com um componente inválido.
As dependências cíclicas podem funcionar no React Native? Se não, como faço para contornar isso?
Códigoindex.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;