当水平不显示任何内容时反应本机嵌套滚动视图
React native nested scroll view when horizontal not showing anything
我已经查看了大部分与我相关的问题,但还没有找到解决方案,我的代码如下所示:
<View style={{flex: 1}}>
<ScrollView style={{flexGrow: 1}}>
<Component />
<AnotherComponent />
<View style={{flex: 1}}>
<ScrollView
style={{}}
nestedScrollEnabled
horizontal={true}>
<Button />
<Button />
<Button />
</ScrollView>
</View>
</ScrollView>
</View>
当我删除水平属性并向嵌套的 ScrollView 添加特定高度时,滚动将垂直工作,但当我设置 horizontal={true}
时,按钮消失。
布局图:
我出于设计目的创建了一个自定义按钮,如下所示
检查this零食
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
Button as BTN,
Dimensions,
} from 'react-native';
function Button({ title, style = {} }) {
return (
<View style={{ ...style }}>
<BTN title={title} />
</View>
);
}
export default Button;
然后在嵌套卷轴中看起来像这样
import Button from './components/Button';
// Watch out here I have imported my custom button and not the Button from "react-native"
<View style={{ flex: 1 }}>
<ScrollView style={{ flexGrow: 1 }}>
<View></View>
<View></View>
<View style={{ flex: 1 }}>
<ScrollView
style={{ flexDirection: 'row' }}
nestedScrollEnabled
horizontal={true}>
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
</ScrollView>
</View>
</ScrollView>
</View>
我已经查看了大部分与我相关的问题,但还没有找到解决方案,我的代码如下所示:
<View style={{flex: 1}}>
<ScrollView style={{flexGrow: 1}}>
<Component />
<AnotherComponent />
<View style={{flex: 1}}>
<ScrollView
style={{}}
nestedScrollEnabled
horizontal={true}>
<Button />
<Button />
<Button />
</ScrollView>
</View>
</ScrollView>
</View>
当我删除水平属性并向嵌套的 ScrollView 添加特定高度时,滚动将垂直工作,但当我设置 horizontal={true}
时,按钮消失。
布局图:
我出于设计目的创建了一个自定义按钮,如下所示
检查this零食
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
Button as BTN,
Dimensions,
} from 'react-native';
function Button({ title, style = {} }) {
return (
<View style={{ ...style }}>
<BTN title={title} />
</View>
);
}
export default Button;
然后在嵌套卷轴中看起来像这样
import Button from './components/Button';
// Watch out here I have imported my custom button and not the Button from "react-native"
<View style={{ flex: 1 }}>
<ScrollView style={{ flexGrow: 1 }}>
<View></View>
<View></View>
<View style={{ flex: 1 }}>
<ScrollView
style={{ flexDirection: 'row' }}
nestedScrollEnabled
horizontal={true}>
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
</ScrollView>
</View>
</ScrollView>
</View>