小编Cry*_*fel的帖子

我是React Native的新手,我想知道如何隐藏/显示组件.
这是我的测试用例:

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

我有一个TextInput组件,我想要的是显示TouchableHighlight输入何时获得焦点,然后隐藏TouchableHighlight用户按下取消按钮的时间.

我不知道如何"访问" TouchableHighlight组件以隐藏/显示我的功能showCancel/hideCancel.
另外,我怎样才能从一开始就隐藏按钮？

我正在尝试动画一个元素列表,以便在渲染到页面时一个接一个地滑动.

一切都适用于Chrome和Firefox,即使在Safari 11工作得很好,但safari 12也不能很好地完成动画.

如下图所示,当动画完成时,所有项目应与顶部对齐,但由于某些原因,仅在Safari 12中,项目是随机呈现的.除此之外,按钮上的鼠标已关闭.

您可以在这里查看问题:https://codepen.io/crysfel/pen/GwoQxE(确保打开safari 12的链接)

我认为css非常标准:

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  opacity:0;
  transform: translateY(60px);
  animation: slideIn ease 1;
  animation-fill-mode: forwards;
  animation-duration: 175ms;
}

和一个简单的JavaScript一个接一个地动画项目:

function animateIn() {
  $('ul li').each(function(index) {
    $(this).removeClass('slide-in');
    setTimeout(() => {
      $(this).addClass('slide-in');
    }, 50 * index)
  })
}


$(() => {

  animateIn();

  $('#show').click(function() {
    animateIn();  
  });
});

编辑:

我已经解决了这个问题:事实证明我所要做的就是transform: translateY(60px);从中删除slide-in.显然,safari在动画结束时使用该样式覆盖最终值.这很奇怪,因为视觉上看起来不对,但活动区域都很好.

在本机反应中,有没有办法获取设备的网络状态？例如,我想知道当前设备是在线还是离线.此外,我想检测设备何时联机或脱机,以便向用户或我需要运行的任何其他进程显示消息.

到目前为止,我所能找到的只是向API发送请求,并设置catch回调fetch,如果没有连接catch回调将运行,这似乎工作,但我想知道是否有更好的方法来解决这个问题.

我还想知道该设备是否使用wifi或lte连接.

有帮助吗？