我如何通过触摸 React Native 上的屏幕而不是按钮来 hide/show 组件？

Question

我是第一次学习 React Native。我想通过触摸屏幕而不是特定按钮来实现 show/hide 组件的功能。

（示例图片请查看附件。）

enter image description here

在这段代码中，我试图创建一个函数。如果我触摸屏幕（<View style={style.center}>，然后 show/hide renderChatGroup() 和 renderListMessages() 包含在 <View style={style.footer}> 中。源代码如下。

在我的代码中，它有效。但是，这两个<View> 标签并不是并列的。页脚视图是中心视图的 child.

我想让它们平行。但是我找不到关于控制另一个 <View> 标签的内容，而不是 child。在这段代码中，我使用了setState，然后我无法控制下面的另一个<View>。

当然，我尝试了 Fragment 标签，但它没有呈现任何东西。

我怎样才能实现这个功能？请帮助我！

    export default class Streamer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isVisibleFooter: true,
        };
    }
    
    renderChatGroup = () => {
    const { isVisibleFooter } = this.state;
    if (isVisibleFooter) {
      return (
        <ChatInputGroup
          onPressHeart={this.onPressHeart}
          onPressSend={this.onPressSend}
          onFocus={this.onFocusChatGroup}
          onEndEditing={this.onEndEditing}
        />
      );
    }
    return null;
  };
  
  onPressVisible = () => {
    const { isVisibleFooter } = this.state;
    this.setState(() => ({ isVisibleFooter: !isVisibleFooter }));
  };

  render() {
      return (
        <SafeAreaView style={styles.container}>
          <SafeAreaView style={styles.contentWrapper}>
            <View style={styles.header} />
            <TouchableWithoutFeedback onPress={this.onPressVisible}>
              <View style={styles.center}>
                <View style={styles.footer}>
                  {this.renderChatGroup()}
                  {this.renderListMessages()}
                </View>
              </View>
            </TouchableWithoutFeedback>
          </SafeAreaView>
        </SafeAreaView>
      );
    }
  }

Answer 1

首先，我强烈建议您将 React Native 与功能组件和 React Hooks 结合使用，因为它们的替代方案很快就会被弃用。

由于 onPress 在 View 组件上不可用，您需要将其替换为 TouchableWithoutFeedback，就像您在代码中所做的那样。

对于 Showing/Hiding 视图，您需要使用条件运算符。

export default class Streamer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isVisibleFooter: true,
        };
    }
    
    renderChatGroup = () => {
    const { isVisibleFooter } = this.state;
    if (isVisibleFooter) {
      return (
        <ChatInputGroup
          onPressHeart={this.onPressHeart}
          onPressSend={this.onPressSend}
          onFocus={this.onFocusChatGroup}
          onEndEditing={this.onEndEditing}
        />
      );
    }
    return null;
  };
  
  onPressVisible = () => {
    this.setState(() => ({ isVisibleFooter: !isVisibleFooter }));
    const { isVisibleFooter } = this.state;
  };

  render() {
      return (
        <SafeAreaView style={styles.container}>
          <SafeAreaView style={styles.contentWrapper}>
            <View style={styles.header} />
            <TouchableWithoutFeedback onPress={this.onPressVisible}>
              <View style={styles.center}>
                {isVisibleFooter && <View style={styles.footer}>
                  {this.renderChatGroup()}
                  {this.renderListMessages()}
                </View>}
              </View>
            </TouchableWithoutFeedback>
          </SafeAreaView>
        </SafeAreaView>
      );
    }
  }

在这里你可以看到我已经替换了

<View style={styles.footer}>
    {this.renderChatGroup()}
    {this.renderListMessages()}
</View>

和

{isFooterVisible && <View style={styles.footer}>
    {this.renderChatGroup()}
    {this.renderListMessages()}
</View>}

声明仅在

时显示 Footer 视图

const isFooterVisible = true;

我如何通过触摸 React Native 上的屏幕而不是按钮来 hide/show 组件？

How can I hide/show components by touching not button but screen on React Native?

components

screen

show-hide

react-native