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

【问题标题】：Prevent scene transition when passing props react-native-router-flux传递道具时防止场景转换 react-native-router-flux
【发布时间】：2017-04-30 02:45:39
【问题描述】：

我在尝试将 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>      
        );
}

【问题讨论】：

标签： javascript react-native frontend

【解决方案1】：

使用 react-native-router-flux 时，我发现在场景声明中设置 duration={1} 会导致跳过过渡动画：

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

我从未尝试过将duration 作为道具传递，但我认为它没有理由不起作用。

【讨论】：

感谢您的回答。但停止动画根本不是我的本意。正如您在上面链接中附加的图片中看到的那样，我的目的是在拆分视图的右侧渲染新场景，但应该将场景保留在左侧。
对不起。我误解了你的问题。无论如何我都会把它留在这里，可能对其他开发人员有用。

【解决方案2】：

我终于在 1 天后弄明白了。感谢 Redux，我只需要创建另一个 Action 创建者，然后将 rowData 传递给它，然后我再次分派 action 以接收状态。我不需要使用replace或reset，Actions.SCENE_KEY就足够了右侧像魅力一样显示数据。

【讨论】：

【解决方案3】：

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

它的工作原理类似于 react native 的导航器。如果你推送或弹出某些东西，它会显示事务效果，但在使用替换时不会显示任何效果..

干杯:)

【讨论】：

我应用了你的解决方案，但模拟器抱怨：'action type should be defined'
你到底写了什么？