React Navigation点击自定义MainButton无法触发屏幕跳转问题求助

问题根因 #

你在App.js中给<MainButton>传入的onPress属性没有被自定义组件内部接收绑定，所以点击事件不会触发，不存在「内联代码覆盖内部配置」的问题，是属性透传缺失导致的。

修复方案 #

修改MainButton.js中的TouchableOpacity组件，把外部传入的onPress属性绑定上去即可：

import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, } from 'react-native';

const MainButton = props => {
    // 给TouchableOpacity加上onPress属性，透传外部传入的回调
    return <TouchableOpacity onPress={props.onPress}>
        <View style={styles.button}>
            <Text style={styles.buttonText}>{props.children}</Text>
        </View>
    </TouchableOpacity>
}

// 后面的样式和导出代码保持不变即可

可选优化 #

你当前App.js里的Nar路由组件是无意义的封装，可以直接把NarScreen指定为路由组件，简化代码：

// App.js中修改Stack.Screen配置即可，无需单独写Nar函数组件
<Stack.Screen name="Nar" component={NarScreen} />

内容的提问来源于stack exchange，提问作者PatMatrick