Question

在React Native应用程序中，如何在触摸某些未与主Navigator直接绑定的组件时执行导航？

Main // Here I have my main NavigatorIOS
└─TabBar
  └─ListView
    └─Cell // onTap should navigate to a detail page about my cell.

在Xcode中，使用segue即可以编程方式执行此操作非常简单。

有没有办法访问主Navigator对象以执行独立组件的导航？

Answer 1

您可以使用React Navigation。它的解决方案非常简单易用。它还具有堆栈和tab navigator支持。

您可以在路由器中定义屏幕并从任何地方调用它。基本的例子就是这样的。

BasicApp.js . 

import {
  StackNavigator,
} from 'react-navigation';

const BasicApp = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});

其中MainScreen和ProfileScreen是您的组件。您可以通过在按钮或其他内容中调用导航来进行简单导航。

<Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />

Answer 2

您可以通过调度将由react-navigation reducer处理的事件来实现此目的。

将以下代码添加到渲染方法

<TouchableOpacity onPress={() => { this.props.goBack() }}>

然后用户mapDispatchToProps将方法定义为调度导航操作的prop。

const mapDispatchToProps = (dispatch) => {
  return {
    goBack: () => {
      dispatch({
        type: 'Navigation/BACK'
      })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

这将调度操作以转到上一页。

如果要导航到任何屏幕，可以使用Navigation / NAVIGATE类型。

渲染代码：

<TouchableOpacity onPress={() => { this.props.goToPage('HomeScreen') }}>
<TouchableOpacity onPress={() => { this.props.goToPage('OtherScreen') }}>

调度功能：

    const mapDispatchToProps = (dispatch) => {
      return {
        goToPage: (page) => {
          dispatch({
            type: 'Navigation/NAVIGATE',
            routeName: page,
            params: {param1, param2}
          })
        }
      }
    }

Answer 3

Cell.js：

<Touchable onPress={this.props.onPress}/>

ListView.js：

<Cell onPress={this.props.onPress}/>

Tabbar.js：

<ListView onPress={this.props.onPress}/>

Main.js：

<TabBar onPress={this.onPressCell}/>
OnPressCell=()=> ....whatever you want

React Native - 从内部组件导航

3 个答案: