草庐IT

javascript - 在组件上操作 NavigatorIOS 路由

coder 2023-07-27 原文

我正在尝试在 React Native 中构建一个非常简单的 Todo 应用程序。它由两个 View 组成:一个带有任务列表，一个带有输入字段(用于添加新的)。导航由 NavigatorIOS 和其上的按钮(本来是带有 UIKit 的 UIBarButtonItem)保证。

在 ListView 中，导航器上有一个添加右键，在带有文本字段的 View 中，左侧有后退按钮和一个完成在右侧。当点击完成时，它应该添加一个带有文本字段内容的新任务。

问题是，按钮及其操作是在创建 NavigatorIOS 组件 时定义的，而且我没有找到一种方法来附加在另一个组件中定义的方法作为按钮操作。

例如，这是我的NavigatorIOS

class TodoList extends Component {

    render() {
        return (
            <NavigatorIOS
                ref="nav"
                style={styles.navbar}
                initialRoute={{
                    component: ItemList,
                    title: 'Todo list',
                    rightButtonTitle: 'Add',
                    onRightButtonPress: () => {
                        this.refs.nav.push({
                            title: 'Add a new task',
                            component: AddTodo,
                            rightButtonTitle: 'Done',
                            onRightButtonPress: () => {
                                console.log('done !');
                            }
                        });
                    }
                }}
            />
        );
    }
}

我没有把我的另外两个组件 ItemList 和 AddTodo 放在这里，因为上面没有什么有趣的东西。

我需要的是一种使组件与导航组件通信(如委托(delegate)模式)的方法。

也许这是不可能的，或者我对 React Native 使用的范式完全错误，所以如果我的问题有什么不清楚的地方，请随时发表评论。

编辑 05/26

实际上，Facebook 团队意识到在使用 NavigatorIOS 组件处理该用例时缺少一些东西。

来自 Eric Vicenti (发布于 2015 年 2 月 3 日)an issue on GitHub这正好涵盖了我的问题。

Currently the best way to do that is to create an EventEmitter in the owner of the NavigatorIOS, then you can pass it down to children using route.passProps. The child can mix in Subscribable.Mixin and then in componentDidMount, you can

this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);

It is clear that this API needs improvement. We are actively working the routing API in Relay, and hopefully react-router, but we want NavigatorIOS to be usable independently. Maybe we should add an event emitter inside the navigator object, so child components can subscribe to various navigator activity: 

this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress);

最佳答案

一个。在初始组件中

this.props.navigator.push({
    title: 'title',
    component: MyComponent,
    rightButtonTitle: 'rightButton',
    passProps: {
        ref: (component) => {this.pushedComponent = component},
    },
    onRightButtonPress: () => {
        // call func
        this.pushedComponent && this.pushedComponent.myFunc();
    },
});

B.在推送组件
替换推送组件中的 onRightButtonPress 函数。

componentDidMount: function() {
    // get current route
    var route = this.props.navigator.navigationContext.currentRoute;
    // update onRightButtonPress func
    route.onRightButtonPress =  () => {
        // call func in pushed component
        this.myFunc();
    };
    // component will not rerender
    this.props.navigator.replace(route);
},

关于javascript - 在组件上操作 NavigatorIOS 路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29943509/

上操NavigatorIOScodethisjavascriptiosreact-native

有关javascript - 在组件上操作 NavigatorIOS 路由的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  3. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  4. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

  5. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - cucumber 的路由问题 - 2

    我正在使用rails3和cucumber，除了这个小问题，一切都很顺利GivenIamonthe"editautomobile"pageNoroutematches{:controller=>"automobiles",:action=>"edit"}(ActionController::RoutingError)现在路径在paths.rb中设置为edit_automobile_path在routes.rb中我有汽车作为资源，我搭建了它所以请告诉我我遗漏了什么，清楚地定义了路线并且匹配，因为我运行了rake路线并看到了路线。请指出正确的方向 最佳答案

  8. ruby - Rails 路由 : Giving default values for path helpers - 2

    有什么方法可以为url/path助手提供默认值吗？我有一个可选范围环绕我的所有路线:#config/routes.rbFoo::Application.routes.drawdoscope"(:current_brand)",:constraints=>{:current_brand=>/(foo)|(bar)/}do#...allotherroutesgohereendend我希望用户能够使用这些URL访问网站:/foo/some-place/bar/some-place/some-place为了方便起见，我在我的ApplicationController中设置了一个@current

  9. ruby-on-rails - 将 Rails 路由助手作为类方法添加到类中 - 2

    我如何将像“root_path”这样的Rails路由助手作为类方法添加到像my_model.rb这样的类中？所以我的课是这样的:ClassMyModeldefself.fooreturnself.root_pathendendMyModel.foo以上不起作用，因为ClassMyModel不响应root_path这是我所知道的:我可以使用includeRails.application.routes.url_helpers，但这只会将模块的方法添加为实例方法我试过扩展Rails.application.routes.url_helpers但它没用请随时给我上课:)

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐