Question

我已经制作了如下的CustomHeader。

import React from 'react'
import {Platform, View, Text, TouchableHighlight, TouchableOpacity, StyleSheet} from 'react-native'
import {Ionicons} from '@expo/vector-icons';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';

export default class CustomHeader extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.wrap}>
          <TouchableOpacity style={styles.goBack} onPress={() => {
            this.props.nav.goBack(null)
          }}>
            <Ionicons name="ios-arrow-back" size={moderateScale(33)} color="#565656"/>
          </TouchableOpacity>
          <View style={styles.title}>
            <Text style={styles.titleText}>Title</Text>
          </View>
          <TouchableOpacity style={styles.share}>
            <Ionicons name="ios-share-outline" size={moderateScale(30)} color="#565656"/>
          </TouchableOpacity>
        </View>
      </View>
    );

  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? Expo.Constants.statusBarHeight : 0
  },
  wrap: {
    height: moderateScale(50),
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#e5e5e5'
  },
  goBack: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: 12,
  },
  title: {
    flex: 8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  titleText: {
    fontSize: moderateScale(15),
    fontWeight: 'bold'
  },
  share: {
    flex: 1,
    justifyContent: 'center',
    paddingRight: 12,
    alignItems: 'flex-end',
  }
});

此组件是在下面导入的ContentDetailScreen.js。

import React from 'react';
import CustomHeader from '../components/CustomHeader'
import {Platform, View, ScrollView, StyleSheet, Text, Dimensions, Image, Button, Modal} from 'react-native';
import ScaleImage from 'react-native-scalable-image';
import {scale, moderateScale, verticalScale} from '../utils/scaling';
import {Ionicons} from '@expo/vector-icons';
import Swiper from 'react-native-swiper'
const {width} = Dimensions.get('window')


export default class ContentDetailScreen extends React.Component {
  static navigationOptions = {
    header: null
  };

  render() {
    console.log(this.props.navigation);
    return (
      <View style={[styles.container]}>
        <CustomHeader nav={this.props.navigation}/>
        <Text style={{backgroundColor: 'red'}}>Something</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  shareIcon: {
    color: '#565656'
  },
  wrapper: {
    backgroundColor: '#333',
    justifyContent: 'flex-start'
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#111'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },
  image: {
    width,
    flex: 1
  },
  paginationStyle: {
    position: 'absolute',
    bottom: 10,
    right: 10
  },
  paginationText: {
    color: '#333',
    fontSize: 20
  }
});

但是，它显示为。

我希望在CustomHeader的下一个常见。

但是＆＃39;东西（红色）＆＃39;在屏幕的底部。

出了什么问题？如果我删除CustomHeader，它是正确的。

Answer 1

删除

flex: 1,

从CustomHeader样式

，你会得到你想要的

为什么下一个布局在React-Native的底部？

1 个答案: