文本/视图没有隐藏在本机反应中答案

【问题标题】：Text/View is not hiding in react native文本/视图没有隐藏在本机反应中
【发布时间】：2019-02-06 08:40:12
【问题描述】：

我正在尝试根据我的反应本机中的标志值隐藏文本/视图。但是，它没有隐藏。

这是我的代码

Class.js 文件

     componentDidMount() {
        this.setState({
          isHidden: true
        });
      }

      constructor(props) {
        super(props);
        this.state = {
          isHidden: false,
    };
      }

render() {
    console.log('renderer');
    const { isHidden } = this.state;
        return (
          <View style={styles.container}>
            <View style={styles.container}>
              //some other objects showing
                  <Text style={styles.Text} hide={isHidden}>
                    Date is Jan 02
                  </Text>
                //some other objects showing
                  <Text style={styles.Text} hide={isHidden}>
              </View>
              </View>
            );
          }
        }

但是，即使标志值是真的，它也没有隐藏。我在这里遗漏了什么吗？

【问题讨论】：

标签： reactjs react-native text view show-hide

【解决方案1】：

我不是 React Native 开发人员，但是，looks of the documentation 的 Text 组件没有 hide 属性。如果你从标准的 React 角度来处理这个问题，你可以为你的组件添加适当的功能（我认为你不能这样做），或者改变你的渲染方法：

class Test extends Component {
    render() {
        return (
            {!this.state.isHidden && <Text style={styles.text}>Exciting copy...</Text>}
        )
    }
}

【讨论】：

【解决方案2】：

如果有帮助，试试这个。 React 没有任何 hide 属性，因此您必须根据 isHidden 变量有条件地渲染文本字段

 (!isHidden)?<Text style={styles.Text}>Date is Jan 02</Text>: ''

【讨论】：

【解决方案3】：

React-Native Text 没有 hide 道具。这样就可以得到想要的效果{!this.state.isHidden}<Text>....</Text>

我看了你的代码，我有一些意见。

建议始终使用Prevent usage of setState in componentDidMount (no-did-mount-set-state)。在此方法中调用 setState() 将触发额外的渲染，但保证在同一滴答中刷新。这保证了即使在这种情况下 render() 将被调用两次，用户也不会看到中间状态。

所以它不会引起明显的副作用。

请谨慎使用此模式，因为它通常会导致性能问题。所以除非你是在做server-rendering，否则任何需要浏览器环境的东西必须进入componentDidMount，因为它只运行客户端，但componentWillMount 在客户端和服务器上都运行。 p>

【讨论】：