react-native - react 原生 scrollView 高度始终保持静态并且不会改变

标签 react-native

我构建了 React Native 应用程序,并与 scrollView 一起用于标题,其中包含水平文本列表。
问题是 ScrollView 的高度占据了屏幕的一半大小。即使将其声明为一种样式,它仍然保持原样。

带有 ScrollView 的屏幕

            <View style={Style.container} >
                {this.props.ExtendedNavigationStore.HeaderTitle ? <BackHeader header={this.props.ExtendedNavigationStore.HeaderTitle} onPressBack={this.goBack} /> : <Header openDrawer={this.openDrawer} />}
                <ScrollView  contentContainerStyle={{flexGrow:1}} style={Style.scrollableView} horizontal showsHorizontalScrollIndicator={false}>
                    {this.renderScrollableHeader()}
                </ScrollView>
                <Routes /> /* stack with dashboard screen */
            </View>
        </Drawer>

    )
}

样式

import {StyleSheet} from 'react-native'
import {calcSize} from '../../utils'


const Styles = StyleSheet.create({
    container : {
        flex:1,  
        backgroundColor:"#e9e7e8"      
    },
    scrollableView:{
        height: calcSize(40),
        backgroundColor: '#000',

    },
    textCategory:{
        fontSize: calcSize(25),
        color:'#fff'
    },
    scrollableButton:{
        flex:1,
        margin:calcSize(30)
    }
})

export default Styles

enter image description here

如您所见,黑色大小是 ScrollView ,
我希望它很小。

在路线堆栈到仪表板屏幕中,样式:

const Style = StyleSheet.create({
    container: {
        backgroundColor: '#9BC53D',
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center'
    },
    text: {
        fontSize: 35,
        color: 'white',
        margin: 10,
        backgroundColor: 'transparent'
    },
    button: {
        width: 100,
        height: 75,
        margin: 20,
        borderWidth: 2,
        borderColor: "#ecebeb",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 40
    }
})

最佳答案

ScrollView 存在现有限制哪里height不能直接提供。
包裹 ScrollView在另一个 View并给出高度 View .

喜欢,

  render() {
    return (
      <View style={styles.container}>
        <View style={{height: 80}} >
          <ScrollView
            horizontal
            style={{ backgroundColor: 'blue'}}
          >
            <Text style={{padding: 24}} >title1</Text>
            <Text style={{padding: 24}} >title2</Text>
            <Text style={{padding: 24}} >title3</Text>
            <Text style={{padding: 24}} >title4</Text>
            <Text style={{padding: 24}} >title5</Text>
          </ScrollView>
        </View>
      </View>
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

零食 sample : https://snack.expo.io/HkVDBhJoz

EXTRAS:不像高度为 ScrollView 提供宽度会正常工作

希望这可以帮助。

关于react-native - react 原生 scrollView 高度始终保持静态并且不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49373417/

相关文章:

ios - UINavigationController 在 RCT_EXPORT_METHOD(React Native)中为 nil

javascript - 如何从项目列表中选择 ScrollView 中的中心项目

java - 在 ubuntu 14 上运行 'react-native run-android' 时出错

unit-testing - 使用 Enzyme + React Native + Jest 进行测试时常量未定义

reactjs - 如何在react-native中setState ComponentDidUpdate中的props值?

javascript - 如何在 React Native 中创建和保存 CSV 文件?

reactjs - 当 react 导航中的 'navigationRef' 准备好时,我如何监听?

react-native - 如何通知 React Native 自定义 View 的大小发生了变化?

javascript - React Native 和 Native Base 中的两个子项具有相同的键

javascript - 如何包含数组的整个长度?