Question

我是react-native的初学者，我想在用户单击onPress时在第一个组件的标题上添加添加（+）按钮，它将创建一个新表单，并且该表单是第二个组件

Answer 1

在App.js设置导航中，如下所示：

import { createAppContainer, createStackNavigator } from "react-navigation";
import MainScreen from "./screens/MainScreen";
import SecondScreen from "./screens/SecondScreen";

const AppNavigator = createStackNavigator({
   MainScreen: {
  screen: MainScreen
},

SecondScreen: {
  screen: SecondScreen,
},
})

const App = createAppContainer(AppNavigator);

export default App;

在主屏幕中

import React, { Component } from "react";
import {
  View,
  Button,
} from "react-native";

class MainScreen extends Component {

  handleOnPress = () => {
    this.props.navigation.navigate("SecondScreen");
  };


  render() {
    return (
      <View>
        <Button
  onPress={this.handleOnPress}
  title="Button"
  color="#841584"
/>
      </View>
    );
  }
}

export default MainScreen;

它将重定向到第二个屏幕

Answer 2

您可以设置表单组件的引用

<FormsComponent
          ref={ref => {
            this.formComponent = ref;
          }}
        />

您应该将功能作为标头组件的传递

<HeaderComponent addNewForm={this.addNewForm} />

使用ref单击标题组件时，父组件将调用表单组件的功能

addNewForm = () => {
    this.formComponent.addNewForm();
  };

应用预览

完整代码

import React, { Component } from "react";
import { View, Text, FlatList } from "react-native";

class HeaderComponent extends Component {
  render() {
    return (
      <View style={{ height: 80, backgroundColor: "red", paddingTop: 24 }}>
        <Text style={{ padding: 20 }} onPress={this.props.addNewForm}>
          Call Function of Form Component
        </Text>
      </View>
    );
  }
}

class FormsComponent extends Component {
  addNewForm = () => {
    alert("add new form");
  };

  render() {
    return (
      <FlatList
        data={[{ key: "Form1" }, { key: "Form2" }]}
        renderItem={({ item }) => <Text>{item.key}</Text>}
        style={{ flex: 1 }}
      />
    );
  }
}

export default class App extends Component {
  addNewForm = () => {
    this.formComponent.addNewForm();
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <HeaderComponent addNewForm={this.addNewForm} />
        <FormsComponent
          ref={ref => {
            this.formComponent = ref;
          }}
        />
      </View>
    );
  }
}

将onPress添加到第一个组件，然后在第二个组件上调用

2 个答案: