React Native新手求助：为首个组件头部加+按钮，点击唤起第二个组件表单

Hey there! As a fellow React Native learner, I’ll walk you through exactly how to build what you need. Let’s split this into two clear tasks and write straightforward, beginner-friendly code for each.

1. Add a (+) Button to the First Component to Open the Form #

We’ll use React’s useState hook to control whether the form component is visible. Here’s a complete example:

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import AddFormComponent from './AddFormComponent'; // Import your form component

const FirstComponent = () => {
  // State to track if the form should be displayed
  const [isFormVisible, setIsFormVisible] = useState(false);

  // Toggle form visibility when the (+) button is pressed
  const toggleForm = () => {
    setIsFormVisible(!isFormVisible);
  };

  return (
    <View style={styles.container}>
      {/* Header with (+) button */}
      <View style={styles.header}>
        <Text style={styles.headerText}>First Component</Text>
        <TouchableOpacity onPress={toggleForm} style={styles.addButton}>
          <Text style={styles.buttonText}>+</Text>
        </TouchableOpacity>
      </View>

      {/* Main content of the first component */}
      <Text style={styles.content}>Your main content here</Text>

      {/* Show the form only when isFormVisible is true */}
      {isFormVisible && <AddFormComponent />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 },
  headerText: { fontSize: 20, fontWeight: 'bold' },
  addButton: { backgroundColor: '#007AFF', padding: 10, borderRadius: 20 },
  buttonText: { color: 'white', fontSize: 20, fontWeight: 'bold' },
  content: { fontSize: 16 }
});

export default FirstComponent;

2. Call the First Component’s onPress Event from the Second Component #

To make this work, we’ll pass the first component’s function as a prop to the form component. Then we can trigger it from inside the form. Let’s update the code:

First, modify FirstComponent to pass its onPress function to AddFormComponent:

// Inside FirstComponent's return statement, update the form render:
{isFormVisible && <AddFormComponent onTriggerFirstPress={handleFirstComponentPress} />}

// Add this function to FirstComponent:
const handleFirstComponentPress = () => {
  console.log("First component's onPress event triggered from the form!");
  // Add your custom logic here (e.g., update state, refresh data)
};

Now here’s the AddFormComponent that calls the passed function:

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

const AddFormComponent = ({ onTriggerFirstPress }) => {
  return (
    <View style={styles.formContainer}>
      <Text style={styles.formTitle}>New Form</Text>
      {/* Add your form fields (TextInput, checkboxes, etc.) here */}
      
      {/* Button to trigger the first component's onPress event */}
      <TouchableOpacity 
        onPress={onTriggerFirstPress} 
        style={styles.triggerButton}
      >
        <Text style={styles.triggerButtonText}>Call First Component's Event</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  formContainer: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    marginTop: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  formTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 20 },
  triggerButton: { backgroundColor: '#34C759', padding: 12, borderRadius: 8, marginTop: 15 },
  triggerButtonText: { color: 'white', textAlign: 'center', fontWeight: 'bold' }
});

export default AddFormComponent;

Quick Tips for Beginners: #

• State Management: useState is the simplest way to control component visibility and state changes in React Native.
• Props: Props let components share data and functions—this is how child components communicate back to parents.
• Conditional Rendering: {isFormVisible && <AddFormComponent />} means "only render the form if the state is true".

That’s all! This code should work out of the box for your needs. Feel free to tweak styles or add your own logic to the functions.

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