如何显示或者隐藏一个组件



  • 例如如下的Text,我想让它获取焦点显示,失去焦点隐藏
    <View style={styles.item_container}>
    <Image source={require('./drawable/bottom_icon_trailer.png')} style={styles.thumbnail} />
    <Text style={styles.instructions}>预告</Text>
    </View>



  • 添加属性:
    pointerEvents: 'none'
    样式:
    top: SCREEN_HEIGHT,
    bottom: -SCREEN_HEIGHT,
    opacity: 0,

    参考Navigator中对Scene的隐藏
    https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js



  • @zdk 是的,已经实现显示和隐藏了!!但是隐藏之后,还是占据着该位置,如果想实现android中的GONE,的话还是不太满意,看来只能再结合使用left或者margin了



  • @rainmeterLotus
    之前的代码是没有移除Text的,只是让它移到屏幕外,即隐藏了。

    如果要移除Text,而不是隐藏的话,在失焦和获焦时,更新isFocus状态即可
    {this.state.isFocus?<Text/>:null}


登录后回复