Реагируйте на собственные макеты ScrollView поверх View - PullRequest
0 голосов
/ 08 марта 2019

Это две нажимаемые кнопки - «Закрыть» и «Звезда». «Звезда» должна быть скрыта ScrollView. Проблема в том, что когда я делаю 'zIndex: -1' для кнопки 'Звезда', она становится неактивной.

Чтобы прояснить ситуацию, вот 10-секундное видео: YouTube

Я также пробовал любой другой способ заставить его работать, но могу найти решение (

 render() {
    return (
      <View style={{ backgroundColor: 'tomato' }}>
        <Animated.ScrollView
          contentInset={{
            top: 450,
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT,
          }}
        >
          <ArticleText animation={{}} />
        </Animated.ScrollView>
        <View />
        <TouchableOpacity style={styles.closeButton}>
          <Icon
            onPress={() => console.log('pressed')}
            name='close'
            containerStyle={{ padding: 5, backgroundColor: '#4f4f4f',                 borderRadius: 40 }}
            color='#ffff'
            size={30}
          />
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.starIcon]}
          onPress={() => console.log('pressed')}
        >
          <Icon
            name='star'
            color='#808080'
            size={25}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

.... styles {
  starIcon: {
    position: 'absolute',
    zIndex: -1,
    top: 180,
    right: 20,
    backgroundColor: '#fff',
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  closeButton: {
    zIndex: 1,
    position: 'absolute',
    top: 30,
    right: 10,
    backgroundColor: 'black',
    width: 40,
    height: 40,
    borderRadius: 20,
  },
}

1 Ответ

0 голосов
/ 08 марта 2019

Постарайтесь не ставить zIndex:-1, возможно, попробуйте это:

closeButton: {zIndex:3}
ScroolView:{zIndex:2}
starIcon:{zIndex:1}

Если это не сработает, попробуйте поместить TouchableOpacity в представление с абсолютными стилями позиции, TouchableOpacity.странно с абсолютной позицией

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...