基於 react-navigation 父子組件的跳轉鏈接

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: 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>
        );
    }

　　這樣就可以實現跳轉了