ReactNative 官方组件 ScrollView 无法直接指定高度的问题

图一.png

代码块1：图一容器组件代码

class ... {
   render() {
        const { countryVisa, currentPersonTypeindex } = this.state;
        return (
            <View style={styles.container}>
                <TabHeader
                    list={countryVisa.Material}
                    currentIndex={currentPersonTypeindex}
                    onPressHeaderItem={this._onPressHeaderItem}
                />
                <VisaMaterialList list={countryVisa.Material && countryVisa.Material[currentPersonTypeindex]} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.grayBGColor,
        flex: 1,
    }
})

代码块2： Heder 组件代码

const TabHeader = ({ list, currentIndex, onPressHeaderItem }) => (
        <ScrollView horizontal={true}  contentContainerStyle={styles.contentContainerStyle}>
            {list.map((item, index) => <TabHeaderItem title={item.Cname || item.ApplyName} selected={currentIndex == index} onPress={() => onPressHeaderItem(index)} />)}
        </ScrollView>
)
const styles = StyleSheet.create({
    contentContainerStyle: {
        width: Layout.window.width,
        height: 40,
        backgroundColor: Colors.whiteColor,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: Colors.gray400,
    }
})

原因: ：官方组件 ScrollView 默认会撑满父级容器高度。
解决方案：官方组件需要在 ScrollView 外面嵌套父级组件来约束高度，比如嵌套一个 View 设置 height 为40。

代码块3：图一修改后Heder 组件代码

const TabHeader = ({ list, currentIndex, onPressHeaderItem }) => (
    <View style={styles.container}>
        <ScrollView horizontal={true} contentContainerStyle={styles.contentContainerStyle}>
            {list.map((item, index) => <TabHeaderItem title={item.Cname || item.ApplyName} selected={currentIndex == index} onPress={() => onPressHeaderItem(index)} />)}
        </ScrollView>
    </View>
)
const styles = StyleSheet.create({
    container: {
        height: 40,
    },
    contentContainerStyle: {
        width: Layout.window.width,
        backgroundColor: Colors.whiteColor,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: Colors.gray400,
    }
})

代码块3 运行结果.png