Question

现在我有一个react-native-elements-header，react-native-snap-carousel包裹在一个简单的容器中，如下所示：

  render() {
    return (
      <View style={styles.container}>
        <Header
          outerContainerStyles={styles.header}
          leftComponent={
            <Text style={styles.heading}>{this.state.title}</Text>
          }
          rightComponent={
            <Icon
              name='account-circle'
              color={COLOR_LIGHT_SECONDARY}
              onPress={() => this.props.navigation.navigate('Settings')} />
          }
        />
        {this.cardCarousel}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  containerCentered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    //flex: 2,
    height: '15%',
  },
  heading: {
    fontSize: TITLE,
    fontWeight: 'bold',
    color: THEME_COLOR,
  },
  card: {
    backgroundColor: THEME_COLOR
  }
});

和this.cardCarousel返回带分页的轮播：

get cardCarousel() {
    const { activeSlide, entries } = this.state;
    var phoneWidth = Dimensions.get('window').width;

    return (
      <View style={styles.containerCentered}>
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={entries}
          renderItem={this._renderItem}
          sliderWidth={phoneWidth}
          itemWidth={phoneWidth*0.85}
        />

        <Pagination
          dotsLength={this.state.entries.length}
          activeDotIndex={activeSlide}
          containerStyle={{}}
          dotStyle={{
              width: 8,
              height: 8,
              borderRadius: 4,
              marginHorizontal: 0,
              backgroundColor: THEME_COLOR
          }}
          inactiveDotStyle={{
              // Define styles for inactive dots here
          }}
          inactiveDotOpacity={1}
          inactiveDotScale={0.6}
        />
      </View>
    );
  }

但是cardCarousel覆盖在header之上。我已经为容器和containerCentered尝试了很多道具但是cardCarousel总是覆盖标题并从顶部对齐。我在这做错了什么？我还附上了截图：

Answer 1

react-native-elements-header是绝对定位的元素，因为标题是绝对定位的轮播被呈现在标题之上。检查一次 https://github.com/react-native-training/react-native-elements/blob/8d4f85890bc37da64fa9712b166a92dd13b2e0a3/src/header/Header.js

<Header
      outerContainerStyles={styles.header}
      leftComponent={
        <Text style={styles.heading}>{this.state.title}</Text>
      }
      rightComponent={
        <Icon
          name='account-circle'
          color={COLOR_LIGHT_SECONDARY}
          onPress={() => this.props.navigation.navigate('Settings')} />
      }
    />

所以给标题outerContainerStyles赋予相对位置。

<Header
  outerContainerStyles={{position: "relative", height: "15%"}}
  leftComponent={
    <Text style={styles.heading}>{this.state.title}</Text>
  }
  rightComponent={
    <Icon
      name='account-circle'
      color={COLOR_LIGHT_SECONDARY}
      onPress={() => this.props.navigation.navigate('Settings')} />
  }
/>

如何确保元素不会覆盖反应原生？

1 个答案: