Question

我在尝试将listview与react-native-router-flux

结合使用时遇到了问题

预期行为

我使用Action.SCENE_NAME将道具从父母传递给孩子，它在手机上运作完美。

但在平板电脑中，我使用拆分视图。我想要的结果如下：

左边是父母，右边是孩子。当我点击左侧时，它应该立即显示在右侧，没有任何过渡动画。 Screen shot of tablet

实际行为

在平板电脑上显示当我单击左侧时，它会将过渡动画引发到子组件我该如何预防？

这是我的代码：

renderRow(rowData) {
        return (   
                 <View style={styles.generalStyle}>
                    <TouchableOpacity 
                    onPress={() => {
                        if (window.width <= 600) {

                             Actions.calendarDetail({ eventtop: rowData });
                        } else if (window.width > 600) {      
                            // HOW CAN I PASS PROPS TO <TabletComponent />;
                            // without causing any transition animation
                        }
                     }}>
                        <View>
                            <Text style={styles.evenType}>
                                 {rowData.EventType}
                             </Text>
                             <Text style={{ ...styles.contentStyle, ...styles.contenStyle2 }}>
                                {dateFormat(rowData.EventDate, 'mm/dd/yyyy')}
                             </Text>
                             <Icon
                                name='chevron-thin-right'
                                style={styles.iconStyle}
                             />
                             <View 
                                style={styles.titleStyle}
                             >
                                <Text style={styles.contentStyle}>  
                                {rowData.Title}
                             </Text>
                             </View>                          
                         </View>                 
                    </TouchableOpacity>

                </View>      
        );
}

Answer 1

当使用react-native-router-flux时，我在场景声明结果中发现设置持续时间= {1}，跳过过渡动画：

<Scene key={'someScene'} component={SomeComponent} title="Some Title" duration={1}/>

我从来没有尝试过duration作为道具，但我认为没有理由它不会起作用。

Answer 2

我终于在1天后弄明白了。感谢Redux，我需要的是创建另一个Action创建者，然后将rowData传递给它，之后我再次发送动作以接收状态。我不需要使用替换或重置，Actions.SCENE_KEY就足够了右侧显示数据，如魅力。

Answer 3

在调用场景时，您应该使用Actions.SCENE_NAME({type: replace | reset})来禁用事务中的推送效果（动画）。替换|重置只是不要在场景堆栈中推送任何东西，而是将当前场景替换为该场所所需的场景...

它与反应原生的导航器的工作方式类似。在这种情况下，如果您按下或弹出某些东西，它会显示交易效果，但在使用替换时不会显示任何效果..

干杯:)

传递道具react-native-router-flux时防止场景转换

3 个答案: