为什么不在另一个组件中运行类组件中的函数？ 反应本机

Question

我有一个 stacknavigator 并且在headerTitle有每个屏幕的标题组件，代码如下：

 const Home_stack = createStackNavigator({ //hooks
    
    Home: {
        screen: Home, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Header navigation = {navigation} title = "Shum Note"/>}
        }
    },
    Create: {
        screen: Create, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Childs_header navigation = {navigation} title = "Create Note"/>}
        }
    },
    Edit: {
        screen: Edit, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Childs_header navigation = {navigation} title = "Edit Note"/>}
        }
    },
});

这是 Childs_header 组件：

import Create_note from "../components/Create_note";

class Header extends Component {

    comun = new Create_note();

    render() {
        return (
            <>
                <View style ={{backgroundColor: "white", flexDirection: "row", alignItems: "center"}}>
                    <View>
                        <Text style = {{color: "black", fontSize: 30, marginLeft: -20}}>{this.props.title}
                        </Text>
                    </View>
                    <View>
                        <Text>
                            <Feather name="check-square" size={24} color="black" onPress = {() => this.comun.save_data(this.props.navigation)}/>
                        </Text>
                    </View>
               </View>
            </>
        );
    }
}

export default Header;

如您所见，我导入了组件Create_note并创建了它的一个对象以使用其功能之一，在这种情况下是save_data ，但由于某种原因它不起作用，不知道它是否与AsyncStorage ， AsyncStorage与console.log("hi")它可以工作，但不能保存数据，这是 create_note 组件的结构：

class Create_note extends Component {

state = {
    content: "",
    default_color: "#87cefa", //default color (cyan)
}

save_data = async() => {
    
    if (this.state.content === "") {
    
        //navigation.navigate("Home");
    
    }else {
        
        let clear_content = this.state.content.replace(/ /g,""); //replace al  
        
        try {

            const data = await AsyncStorage.getItem("data");
    
            if (data === null) {
                const data = {"array_notes": [], "last_note": 0}; 
                const last_note = data.last_note + 1;
                const new_note = {note_number: last_note, content: clear_content, color: this.state.default_color, text_color: this.state.color}; //create a new_note object, note_number will be the key for each note
                const array_notes = [];
                array_notes.push(new_note);
                data.array_notes = array_notes;
                data.last_note = last_note;
                await AsyncStorage.setItem("data", JSON.stringify(data)); //using stringify to save the array 
                //navigation.navigate("Home");
            }else {
                const data = JSON.parse(await AsyncStorage.getItem("data")); //use parse to acces to the data of the array
                const last_note = data.last_note + 1;
                const new_note = {note_number: last_note, content: clear_content, color: this.state.default_color, text_color: this.state.color};
                const array_notes = data.array_notes;
                array_notes.push(new_note);
                data.array_notes = array_notes;
                data.last_note = last_note;
                await AsyncStorage.setItem("data", JSON.stringify(data));
                //navigation.navigate("Home");
            } 
    
        }catch(error) {
            alert(error);
        }
    }
}

render() {
    const props = {
        screen: "create_note",
        change_color: this.change_color.bind(this),
        update_color: this.update_color.bind(this),
    }
    return (
        <>
            <ScrollView>                    
                <RichEditor
                ref = {this.richText}
                onChange = {text => this.setState({content: text}, () => console.log(this.state.content))}
                allowFileAccess = {true}>
                </RichEditor>
            </ScrollView>
            {this.state.change_color ? 
                <Color
                    {...props}>
                </Color>
            : null}
            <RichToolbar
                editor = {this.richText}
                onPressAddImage = {this.insertImage}
                actions = {[
                    actions.insertBulletsList,
                    actions.insertOrderedList,
                    actions.insertImage,
                    "change_text_color", 
                ]}
                iconMap  ={{
                    [actions.insertBulletsList]: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-list-bulleted" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                    [actions.insertOrderedList]: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-list-numbered" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                    [actions.insertImage]: () => <Text style = {this.styles.icon}><MaterialIcons name = "image" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                    change_text_color: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-color-text" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                }}
                change_text_color = {this.change_color}
                style = {{backgroundColor: "white"}}>
            </RichToolbar>
            <Button title = "save" onPress = {this.save_data}></Button>
        </>
    );
}

这是一张图片，以便您可以更好地看到结构：

当我单击check图标时，该功能应该运行，蓝色按钮起作用，因为它是 create_note 组件的一部分，但我希望它在check图标中

Answer 1

通过查看您的代码，我认为问题在于您将导航状态对象作为参数传递给您的save_data标记onClick的save_data函数。

this.comun.save_data(this.props.navigation)

但是save_data的函数定义不带任何参数：

save_data = async () => {
  // ...
};

所以你可以将save_data函数更改为这样的

save_data = async (navigation) => {
  // ...
};

为了让它从Header组件内部工作。

---

如果您希望Create_note组件呈现的保存按钮也调用save_data onPress ； 您还必须在那里传递导航状态。