Reaction-native: компоненты с zIndex в flatlist, похоже, не работают - PullRequest
Новая
       26

Reaction-native: компоненты с zIndex в flatlist, похоже, не работают

0 голосов
/ 07 мая 2019

Основной рендер: 

  render() {
    return (

    <View>
      <FlatList
      ListEmptyComponent={() => <DialogBox type="internet" />}
      ...
    </View>
     );

<DialogBox type="internet" /> контейнер, стилизованный через абсолютную позицию: 

export const dialogBox = EStyleSheet.create({
   container : {
       position: 'absolute',
       justifyContent: 'center',
       alignItems: 'center',
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
       zIndex:10000

   },
   ....

и DialogBox: 

  <View style={dialogBox.container}>
       <View style={dialogBox.box}>
       ...

Если я удаляю absolute форма контейнера, показывает.Но я хочу показать его в середине экрана (а не в середине плоского списка).

Но почему не работает zIndex в абсолютном выражении?

Я пытаюсь изменить код так: 

    <View style={{position: 'absolute',zIndex:1}}>
      <FlatList
      style={{position: 'absolute',zIndex:2}}

или вот это: 

    <View style={{position: 'relative'}}>
      <FlatList
      style={{position: 'relative'}}

Но это не работа

1 Ответ

0 голосов
/ 08 мая 2019

zIndex работает не только для абсолютного положения. 

touchableCard: {
    justifyContent: "center",
    alignItems: "center",
    zIndex: 200,
    ...
  },

  emptyNotesInfo: {
    textAlign: "center",
    zIndex: 100,
    ...
  },

Попробуйте это: 

   <View>
      <FlatList style={{flex: 1}}
        renderItem={ data => <View style={{zIndex: 2}}><Text>HERE example view</Text></View>}
      ...
      />
   </View>
  <View style={{ 
       position: "absolute", 
       zIndex: 1,
       alignContent: "center",
       alignItems: "center",
       alignSelf: "center"
     }}>
     <Text>HERE What you need too hide</Text>
  </View>
...