基于 react-navigation 父子组件的跳转链接

在父组件中引入子组件，这个时候通常直接使用 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: 14}}>
                        <TouchableOpacity
                            onPress={() => navigate(‘ShakeMode‘)}  // 跳转
                        >
                            <Text>点击震动手机</Text>
                        </TouchableOpacity>
                    </View>

                </ScrollView>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        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: 14}} >
                         <CommonCell
                             nextClick={() => {this.endClick()}}
                             title="点击震动手机"
                         />
                     </View>

                 </ScrollView>
             </View>
         );
     }

     // 控制跳转
     endClick() {
         const { navigate } = this.props.navigation;
         navigate(‘ShakeMode‘)
     }

 }

 const styles = StyleSheet.create({
     container: {
         flex: 1,
         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>
        );
    }

　　这样就可以实现跳转了