React Native 中带有包装行的垂直滚动视图
vertical ScrollView with wrapped row in React Native
我是 React Native 的新手,正在努力让我的 ScrollView 正常工作。
我正在尝试在页面上成对排列的 TouchableOpacity 组件的垂直滚动列表,例如
这是我将 TouchableOpacity 组件包装在视图中时应用程序的外观,但(显然)它不可滚动。如果我将 View 更改为 ScrollView,组件将不再正确排列,它们现在看起来像这样:
它们仍然不可滚动,布局也不再正常工作。
到目前为止(可能有更好的方法来实现这一点?)我试图通过将容器设置为具有 flexDirection: row 并启用 wrap 并适当调整子组件的大小来创建我的布局在屏幕上放两个。
我使用的代码的近似值是:
export default class App extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
</ScrollView>
);
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
height: 3440,
minHeight: 3440,
width: 1280,
minWidth: 1280,
flexGrow: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
newButton: {
height: 180,
width: 620,
margin: 5,
borderRadius: 10,
alignContent: 'center',
justifyContent: 'center',
backgroundColor: 'darkblue'
},
buttonText: {
alignSelf: 'center',
fontSize: 36,
color: 'white',
}
});
此视图是网格视图。
试试这个代码。 ()
var TestCmp = React.createClass({
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var data = Array.apply(null, {length: 20}).map(Number.call, Number);
return {
dataSource: ds.cloneWithRows(data),
};
},
render: function() {
return (
<ListView contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
/>
);
}
});
这是样式对象:
var styles = StyleSheet.create({
list: {
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
backgroundColor: 'red',
margin: 3,
width: 100
}
});
我们在换行中设置项目,并设置每个子对象的宽度。
有很多依赖项。这将使您的工作变得轻松。
<ScrollView>
<View style={styles.container}>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
</View>
</ScrollView>
我是 React Native 的新手,正在努力让我的 ScrollView 正常工作。
我正在尝试在页面上成对排列的 TouchableOpacity 组件的垂直滚动列表,例如
这是我将 TouchableOpacity 组件包装在视图中时应用程序的外观,但(显然)它不可滚动。如果我将 View 更改为 ScrollView,组件将不再正确排列,它们现在看起来像这样:
它们仍然不可滚动,布局也不再正常工作。
到目前为止(可能有更好的方法来实现这一点?)我试图通过将容器设置为具有 flexDirection: row 并启用 wrap 并适当调整子组件的大小来创建我的布局在屏幕上放两个。
我使用的代码的近似值是:
export default class App extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
</ScrollView>
);
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
height: 3440,
minHeight: 3440,
width: 1280,
minWidth: 1280,
flexGrow: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
newButton: {
height: 180,
width: 620,
margin: 5,
borderRadius: 10,
alignContent: 'center',
justifyContent: 'center',
backgroundColor: 'darkblue'
},
buttonText: {
alignSelf: 'center',
fontSize: 36,
color: 'white',
}
});
此视图是网格视图。
试试这个代码。 (
var TestCmp = React.createClass({
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var data = Array.apply(null, {length: 20}).map(Number.call, Number);
return {
dataSource: ds.cloneWithRows(data),
};
},
render: function() {
return (
<ListView contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
/>
);
}
});
这是样式对象:
var styles = StyleSheet.create({
list: {
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
backgroundColor: 'red',
margin: 3,
width: 100
}
});
我们在换行中设置项目,并设置每个子对象的宽度。
有很多依赖项。这将使您的工作变得轻松。
<ScrollView>
<View style={styles.container}>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</TouchableOpacity>
</View>
</ScrollView>