`boolean` 类型的无效道具 `onPress`

Question

我正在制作 react native expo 应用程序，我有一个问题。我有 2 页。在 page1.js 中，我设置了 page2.js 的标题，但我对此有一些问题。我有 TouchableOpacity，在那里我导航到另一个页面，并在那里设置了 createStackNavigator 选项的标题。在 createStackNavigator 选项中，我得到已发送的标题。它给了我错误：警告：道具类型失败：提供给, 预期onPress的类型的道具无效。还有一个：this.props.onPress 不是一个函数booleanTouchableOpacityfunction

我做错了什么？代码：

// page1.js
import React, { Component } from 'react';
import { StyleSheet, View, Button, Image, Text, TouchableOpacity, ScrollView, SafeAreaView, ActivityIndicator } from 'react-native';
import { Header } from 'react-navigation';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import CoursesPlan from '../components/CoursesPlan'

const title = "a";

setTitle = (data) => {
title = data;
}

getTitle = () => {
return title;
}

class Page1 extends Component {
render() {
    return (
        <ScrollView>
            <View style={styles.MainContainer}>
                <TouchableOpacity
                    activeOpacity={.7}
                    onPress={() =>
                        setTitle("title"),
                        this.props.navigation.navigate('CourseOne', {
                        id: 1,
                    })}>
                    <CoursesPlan
                        number="1"
                        title="??? ????? HTML?"/>
                </TouchableOpacity>
            </View>
        </ScrollView>
    );
}
}

export default createStackNavigator({
Main: {
    screen: Main,
    navigationOptions: {
        header: null,
    },
},
Page1: {
    screen: Page1,
    navigationOptions: ({ navigation }) => ({
        headerTitle: getTitle(),
        headerStyle: {
            elevation: 0,
            borderBottomWidth:1,
            borderBottomColor: "#dddddd",
        },
    }),
},},{
    initialRouteName: 'Main',
}
);

Answer 1

您没有提供函数，onPress因为您没有将它包裹在大括号中。

试试这个为你的onPress功能：

onPress={() => {
    setTitle("title");
    this.props.navigation.navigate('CourseOne', { id: 1,});
}}>