我想要一个水平的ScrollView,启用了一个特殊要求的分页:每个页面(或卡)是容器宽度的90%.剩下的10%应该是下一页的预览.
可以使用ScrollView执行此操作吗?我能以某种方式指定分页的宽度而不是取容器的宽度吗?
(图像来自这个类似的问题:React Native Card Carousel视图?)
pagination scrollview horizontalscrollview carousel react-native
我正在使用新FlatList组件,并希望在生命周期方法中使用ScrollToIndex(或ScrollToEnd)componentDidMount.
我有一个让我们说100个项目的数组,我不想开始渲染第一个项目,但在开始时.让我们说第50项.当FlatList一次只显示一个项目时,它正如所期望的那样工作,如下所述:https://github.com/facebook/react-native/issues/13202
componentDidMount() {
let wait = new Promise((resolve) => setTimeout(resolve, 500)); // Smaller number should work
wait.then( () => {
this.refs.flatlist.scrollToIndex({index: 4, animated: true});
});
}
Run Code Online (Sandbox Code Playgroud)
这个片段在调用几毫秒后scrollToIndex运行.componentDidMount
但是当我使用FlatList视图包含3x3网格的地方时,我根本无法使其运行.当我使用scrollToIndex并且索引在指定的道具之外时initialNumToRender,我只得到一个scrollIndex out of range $ID我无法理解的错误.提供的数据数组具有所有例如100个项目.当我创造scrollToEnd它时,它只停留在两者之间而不是最后.对我来说,它看起来像某种bug,我不知道如何在初始渲染后滚动到$ X项目.你能帮助我吗?
我很感激任何形式的帮助或评论.
我在iOS和Android(模拟器和设备)上尝试了React-Native v0.43.0和v0.44.0,它总是一样的.
我是React Native的新手,真的无法弄清楚为什么我无法将状态从一个组件传递到另一个组件
export default class questions extends Component {
constructor(props){
super(props);
this.state={
name: "stupidCount",
val: 1}
}
render(){
const { navigate } = this.props.navigation;
const { name2 } = this.state;
return(
<View style={styles.box}>
<TouchableOpacity onPress={() => navigate('Question1', stupidCount={name2})} >
<Text style={styles.h1}> Question 1 </Text>
</TouchableOpacity>
Run Code Online (Sandbox Code Playgroud)
第二部分,'问题1'
export default class Question2 extends Component {
render(){
const { navigate } = this.props.navigation;
console.log(stupidCount.val);
return(
<View style={styles.box}>
<Text style={styles.h1}>Question 2 </Text>
<Text> state test {stupidCount.val}</Text>
Run Code Online (Sandbox Code Playgroud)
非常感谢提前