1、在一个页面中中引入一个组件,但是这个组件是一个小组件,例如是一个cell,单独的每个cell都是需要点击有链接跳转的,这个时候通常直接使用 onPress 的跳转就会不起作用

正确的处理方法是,在组件中封装一个点击事件,然后在父组件中执行跳转的函数

正常的跳转方法是:

import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ScrollView,
} from 'react-native'; // navigator
import { StackNavigator } from 'react-navigation'; // 引入组件 Cell
import CommonCell from './commonCell'; export default class More extends React.Component { // 顶部导航
static navigationOptions = ({ navigation }) => {
const { navigate } = navigation;
return {
title: '更多',
tabBarLabel: '更多',
mode: 'card',
headerMode: 'float',
activeTintColor: '#000000',
};
}; render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView> <View style={{marginTop: }}>
<TouchableOpacity
onPress={() => navigate('ShakeMode')} // 跳转
>
<Text>点击震动手机</Text>
</TouchableOpacity>
</View> </ScrollView>
</View>
);
} } const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#e8e8e8',
},
});

如果引入了组件,在组件中要跳转,方法如下

父组件:

import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ScrollView,
} from 'react-native'; // navigator
import { StackNavigator } from 'react-navigation'; // 引入组件 Cell
import CommonCell from './commonCell'; export default class More extends React.Component { // 顶部导航
static navigationOptions = ({ navigation }) => {
const { navigate } = navigation;
return {
title: '更多',
};
}; render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView>
<View style={{marginTop: }} >
<CommonCell
nextClick={() => {this.endClick()}}
title="点击震动手机"
/>
</View> </ScrollView>
</View>
);
} // 控制跳转
endClick() {
const { navigate } = this.props.navigation;
navigate('ShakeMode')
} } const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#e8e8e8',
},
});

引入组件

CommonCell,并将方法 nextClick = endClick,
endClick执行跳转的方法,
nextClick 传递给子组件
子组件
render() {
return (
<TouchableOpacity
onPress={this.props.nextClick}
>
<View style={styles.container}> {/**左边**/}
<Text style={{marginLeft: 10}}>{this.props.title}</Text> {/**右边 返回什么需要判断 **/}
{this.renderRightView()} </View>
</TouchableOpacity>
);
}

  这样就可以实现跳转了

基于 react-navigation 父子组件的跳转链接的更多相关文章

  1. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  2. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  3. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  4. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  5. React之父子组件之间传值

    1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...

  6. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  7. React中父子组件传值

    一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...

  8. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  9. React之父子组件传递和其它一些要点

    react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 r ...

随机推荐

  1. hdu 4888 最大流给出行列和求矩阵

    第一步,考虑如何求是否有解.使用网络流求解,每一行和每一列分别对应一个点,加上源点和汇点一共有N+M+2个点.有三类边: 1. 源点 -> 每一行对应的点,流量限制为该行的和 2. 每一行对应的 ...

  2. JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式

    代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024="&qu ...

  3. springCloud学习-服务消费者(rest+ribbon)

    1.ribbon简介 spring cloud的Netflix中提供了两个组件实现软负载均衡调用:ribbon和feign. Ribbon 是一个基于 HTTP 和 TCP 客户端的负载均衡器 它可以 ...

  4. ASP.NET MVC 源码分析(一)

    ASP.NET MVC 源码分析(一) 直接上图: 我们先来看Core的设计: 从项目结构来看,asp.net.mvc.core有以下目录: ActionConstraints:action限制相关 ...

  5. cogs 315. [POJ3255] 地砖RoadBlocks

    315. [POJ3255] 地砖RoadBlocks ★★★   输入文件:block.in   输出文件:block.out   简单对比时间限制:1 s   内存限制:128 MB Descri ...

  6. N天学习一个Linux命令之mkdir

    前言 暂无 用途 用于新建目录 常用参数 1.设置目录权限-m, --mode=MODE 2.递归创建目录(父目录不存在时,也创建)-p, --parents 3.其它-v, --verbose pr ...

  7. HDU 4598

    这道题其实不需要考虑具体数值,但可以肯定的是,相连边的两端点必定有一正一负,至于谁正谁负,并不重要,这是可以思考的,很明显的一个二分图性质,如果不满足此条件,是不可能满足题目第二个条件的.所以首先对题 ...

  8. Hadoop Web项目--Mahout0.10 MR算法集锦

    1. 涉及技术及下载 项目开发使用到的软件有:Myeclipse2014,JDK1.8.Hadoop2.6,MySQL5.6.EasyUI1.3.6,jQuery2.0,Spring4.1.3,Hib ...

  9. 【Android】开发优化之——调优工具:TrackView,Method Profiling

    Android SDK自带的tool TrackView 位于 sdk的tools文件夹下.使用方法为:进入到tools下,执行 traceview e:\loginActivityTracing.t ...

  10. Sqlite3插入大量数据性能优化

    近期做的一个项目数据量很大.文本数据有30多M.这样就遇到一个问题.插入数据库时很慢. 这里记录下,优化方法很easy. 原文地址:http://blog.csdn.net/qqmcy/article ...