Question

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

这是我的代码

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>
            );
          }
        }

但是，即使标志值为true，它也不会隐藏。我在这里想念东西吗？

Answer 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>}
        )
    }
}

Answer 2

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

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

Answer 3

React-Native Text没有隐藏道具。您可以通过{!this.state.isHidden}<Text>....</Text>

来获得所需的效果

我看了看你的代码，有几点评论。

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

因此它不会引起明显的副作用。

请谨慎使用此模式，因为它经常会导致性能问题。因此，除非您在进行server-rendering，否则所有需要浏览器环境的内容都必须放入componentDidMount，因为该操作仅在客户端运行，而componentWillMount只能在客户端上运行客户端和服务器。

文本/视图未隐藏在react native

3 个答案: