scrollView 宽高无效

最新推荐文章于 2024-02-21 10:38:31 发布

WYQ_XQ

最新推荐文章于 2024-02-21 10:38:31 发布

阅读量1.1k

点赞数

工作中遇到的问题专栏收录该内容

39 篇文章

订阅专栏

在使用React Native的ScrollView时遇到宽高设置无效的问题。环境为0.46.4版本，问题出现在Android和iOS平台上。预期效果是设置固定宽高，但实际效果并未生效。解决方案是删除宽度和高度样式，或设置`style={{flex: 1}}`。ScrollView的样式会受到其父组件的影响。详细讨论见GitHub issue #15581。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Environment

react-native -v:0.46.4
node -v:v8.3.0
npm -v:5.3.0
yarn --version :0.27.5
- Target Platform: android && ios
- Development Operating System: mac10.12.5
- Build tools:webstorm

Steps to Reproduce

code like that:

   renderTab = ()=> {
        return (
            <View style={{width:WIDTH,height:SCALE(100),backgroundColor:'blue',flexDirection:'row', justifyContent:'space-around', alignItems:'center'}}>
            <View><Text>我发起的</Text></View>
            {(this.state.data&&this.state.data.myIsLeader===1)?<View><Text>带我审批</Text></View>:null}
            {(this.state.data&&this.state.data.myIsLeader===1)?<View><Text>我已审批</Text></View>:null}
        </View>)
    };

    render(){
        return (
            <View style={{width:WIDTH,height:HEIGHT}}>
                <ScrollView
                    style={{backgroundColor:'red',width:WIDTH,height:HEIGHT-SCALE(200)}}>

            </ScrollView>
                {this.renderTab()}
        </View>
        );
    }

期望效果

like that:
expected

实际效果

actual

解决：
删除 style={{width:WIDTH,height:HEIGHT}}
或者设置style={{flex:1}} 。
scrollview的属性不光和自己有关还和父组件栈的属性有关。
GitHub：https://github.com/facebook/react-native/issues/15581