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. poj3233 题解 矩阵乘法 矩阵快速幂

    题意:求S = A + A2 + A3 + … + Ak.(mod m) 这道题很明显可以用矩阵乘法,但是这道题的矩阵是分块矩阵, 分块矩阵概念如下:当一个矩阵A中的单位元素aij不是一个数值而是一个 ...

  2. Spring MVC-控制器(Controller)-多动作控制器(Multi Action Controller)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_multiactioncontroller.htm 说明:示例基于Spring M ...

  3. IntelliJ IDEA 问题总结之二(待补充) —— 快捷键、主题样式、导出jar、sqlite

    随着对idea的使用,问题越来越多,開始第二篇问题总结. 1.快捷键. 用惯了eclipse再用idea后,快捷键就是一个大问题. 并且网上idea的快捷键有非常多版本号.不知道是不是老版本号和新版本 ...

  4. pat1013:数素数

    https://www.patest.cn/contests/pat-b-practise/1013 #include "stdio.h" #include "math. ...

  5. oc32--构造方法1

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int ag ...

  6. android自定义dialog中点击listview的item事件关闭dialog

    import android.app.Activity; import android.app.AlertDialog; import android.app.AlertDialog.Builder; ...

  7. C#如何读写和创建INI文件(经典)转

    C#如何读写和创建INI文件 分类: c#程序设计2011-11-27 20:42 4935人阅读 评论(2) 收藏 举报 inic#stringbuffernullfile 在做项目过程中,有时需要 ...

  8. 2017 Multi-University Training Contest - Team 2 &hdu 6055 Regular polygon

    Regular polygon Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  9. [POI 2008] BLO

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1123 [算法] 首先,如果一个点不是割点,那么,去掉该点后不连通的有序点对就为 : ...

  10. 【BZOJ 2565】 最长双回文串

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2565 [算法] Manacher [代码] #include<bits/std ...