我想知道如何使用针对大型应用的react-native的Navigator组件为应用建模。我有两种方法:
我尝试使用第二策略对导航进行建模,触发一些操作并存储监听它并以状态作为有效负载发出更改。然后,我检查导航顶视图组件以检查密钥并使用if语句来使用this.prop.navigator.push
触发导航。我遇到的问题是导航器不会更改else if语句。从理论上说,它应该有效,但它不起作用,我不知道。
对于模型一,我遇到了将道具传递下来的问题。太乱了!
有人可以为我提供任何用例的示例模型图或github应用程序吗?
示例代码:
var Navigation = React.createClass({
mixins: [FluxMixin, StoreWatchMixin("NavigationStore")],
getStateFromFlux: function() {
var flux = this.getFlux();
console.log('Handled the Navigation: ', flux.store('NavigationStore').getState());
// console.log(this.props.navigator);
var currentState = flux.store("NavigationStore").getState();
if(currentState.data.key !== undefined && currentState.data.key.explore !== undefined) {
this.props.navigator.push({
id: 'YETANOTHERVIEW',
title: 'Yet Another View',
component: SomethingView,
navigationBar: <NavigationBar title="Something View" />,
passProps: {
navigator: this.props.navigator
}
});
} else if(currentState.data.key !== undefined && currentState.data.key.other !== undefined) {
this.props.navigator.push({
id: 'OTHERVIEW',
title: 'Other View',
component: OtherView,
navigationBar: <NavigationBar title="Other View" />,
passProps: {
navigator: this.props.navigator
}
});
} else if(currentState.data.key !== undefined && currentState.data.key.appointments !== undefined) {
AlertIOS.alert('Foo Title', 'My Alert Message');
}
return flux.store("NavigationStore").getState();
},
render: function() {
return (
<WelcomeView navigator={this.props.navigator} />
);
}
});
NavigatorStore:
var NavigationStore = Fluxxor.createStore({
initialize: function() {
this.data = {};
this.bindActions(
constants.CHANGE_NAVIGATION, this.onChangeNavigation,
);
},
onChangeNavigation: function(payload) {
console.log('on change navigation: ', payload);
this.data = payload;
this.emit("change");
},
getState: function() {
return {
data: this.data,
};
},
});
如果有人喜欢研究代码,请转到此页: React Native Flux Navigation Discussion
我有三个分支navigation
,sidemenu-below
和master
。 Sidemenu为第一个案例建模,而Navigation为第二个案例建模。
击>
我现在有分支navigation
,sidemenu-below
,initial
和master
。
navigation
正在使用助焊剂行动。
master
正在使用道具
其他实验位于sidemenu-below
和initial
分支。
答案 0 :(得分:7)
请检查https://github.com/aksonov/react-native-router-flux,也许它会帮助您和任何有兴趣在大型应用中管理导航的人。
它允许在顶级应用程序组件(通常是索引。*。js)中定义所有应用程序转换(“路由”),然后在代码中的任何位置使用类似Actions.logIn或Actions.logOut的内容导航到所需的屏幕
答案 1 :(得分:0)
我能够解决这个问题,它应该在给定的存储库中正常工作。
我忘记从curl_setopt( $ch, CURLOPT_POST, true );
curl_setopt( $ch, CURLOPT_POSTFIELDS, $postFields );
文件中的View
导入Text
和React
。愚蠢的错误!