React native 我们如何创建一个可以用.show（）方法显示的react本机组件

我正在寻找我可以从哪里开始的指针。 我想创建一个react原生反馈表单，可以使用.show方法显示

例如：

export class FeedbackComponent extends React.component{

show() {
    // define this method in a way so that can be called from outside as FeedbackComponent.show()
    // which eventually create a new screen with below rendered View
}

render (){
   return <View>Feedback Form</View>

}

}

---

我总是从考虑应用程序状态开始。只要组件的状态发生变化，React中的UI就会更新

在您的情况下，我必须考虑需要显示反馈表的父上下文。在其最简单的形式中，此上下文可能是一个父屏幕组件，其中显示或隐藏反馈表单组件

我制作了一个简单的实现，您可以在这里找到它：

在我的例子中，App组件是父屏幕组件，我们需要在其中渲染或不渲染FeedbackForm组件

因此，我首先将相关的状态属性添加到应用程序（父屏幕）组件中，如下所示：

  state = {
    feedbackFormVisible : false
  }

<Button title="Give Feedback" onPress={this.handleFeedbackFormVisibility}/>

然后，我将在同一父类中定义一个方法，以便在需要时切换状态：

handleFeedbackFormVisibility = () => this.setState(prevState => ({feedbackFormVisible:!prevState.feedbackFormVisible}))

此处理程序接受父组件中的前一个状态，并切换feedbackFormVisible属性的值（即从false切换到true）

在我的例子中，每次按下按钮组件时，我都会调用此处理程序，如下所示：

  state = {
    feedbackFormVisible : false
  }

<Button title="Give Feedback" onPress={this.handleFeedbackFormVisibility}/>

但是，您可以触发相同的处理程序，并以任何其他方式更新父组件的状态（即计时器过期后或特定滚动点通过后）

然后，应用程序组件的呈现方法将根据应用程序组件状态中feedbackFormVisible的值决定是否显示FeedbackForm组件。我们通过在呈现方法中的Elvis条件中包装FeedbackForm组件来实现这一点，该方法将返回相应的UI（即，是否具有可见的反馈表单）：

{this.state.feedbackFormVisible？（）：null}

下面是完整的应用程序组件代码：

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import FeedbackForm from './components/FeedbackForm';

export default class App extends React.Component {
  state = {
    feedbackFormVisible : false
  }

  handleFeedbackFormVisibility = () => this.setState(prevState => ({feedbackFormVisible:!prevState.feedbackFormVisible}))

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
        This is the App Parent Component
        </Text>
        {
          this.state.feedbackFormVisible ?
        (<FeedbackForm />)
        : null
        }
        <Button title="Give Feedback" onPress={this.handleFeedbackFormVisibility}/>
      </View>
    );
  }
}

import*as React from'React'；
从“react native”导入{文本、视图、样式表、按钮}；
从“./components/FeedbackForm”导入反馈形式；
导出默认类App扩展React.Component{
状态={
feedbackFormVisible:false
}
handleFeedbackFormVisibility=（）=>this.setState（prevState=>（{feedbackFormVisible:！prevState.feedbackFormVisible}））
render（）{
返回(
这是应用程序父组件
{
这个.state.feedbackFormVisible？
()
：null
}
);
}
}

在反馈组件代码下面（请注意，显示/隐藏的逻辑实际上是在父组件中处理的，不在这里）：

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
导出默认类FeedbackForm扩展React.Component{
render（）{
返回(
这是反馈表！
);
}
}

这个组件会出现在app.js中吗？我是说你要在哪里申报。这是一个弹出窗口，就像，它可以做到。我可以告诉你一个方法，但首先要确认我，这是一个弹出或其他东西。