小编Joh*_*ter的帖子

React-Native Horizo​​ntal Scroll View Pagination:预览下一页/卡片

我想要一个水平的ScrollView,启用了一个特殊要求的分页:每个页面(或卡)是容器宽度的90%.剩下的10%应该是下一页的预览.

可以使用ScrollView执行此操作吗?我能以某种方式指定分页的宽度而不是取容器的宽度吗?

圆盘传送带 (图像来自这个类似的问题:React Native Card Carousel视图?)

pagination scrollview horizontalscrollview carousel react-native

12
推荐指数
3
解决办法
3万
查看次数

FlatList组件生命周期方法ScrollToIndex ScrollToEnd等

我正在使用新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 react-native-flatlist

4
推荐指数
1
解决办法
6283
查看次数

如何将状态传递给组件React Native

我是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)

非常感谢提前

state navigator reactjs react-native

3
推荐指数
1
解决办法
2793
查看次数