反应本机 :如何在单击按钮选项卡时打开模式或操作表 wix 反应本机导航

如何使用wix react 本机导航 v2单击基于选项卡的应用程序的底部选项卡来打开模态/操作表？

目前，我正在使用以下软件包和版本：

反应原生："0.59.8">
反应："16.8.3">
反应本机导航："^2.13.2">
react-native-image-crop-picker："^0.24.1">

这是我的路线/导航文件

Promise.all([
Foundation.getImageSource("home", 40),
FontAwesome5.getImageSource("user",30),
Feather.getImageSource("camera",25),
]).then(sources => {
Navigation.setRoot({
root: {
sideMenu: {
center: {
bottomTabs: {
options: {
bottomTabs: {
backgroundColor: 'white',
titleDisplayMode: 'alwaysHide'
},
},
children: [
{
stack: {
children: [{
component: {
name: 'HomeScreen',
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
testID: 'HOME_TAB',
icon: sources[0],
},
topBar: {
title: {
text: 'MyReactApp',
}
}
}
}
},
{
component: {
name: 'Camera',
passProps: {
text: 'This is tab 2'
},
options: {
bottomTab: {
testID: 'CAMERA_TAB',
icon: sources[2]
}
}
}
},
{
stack: {
children: [{
component: {
name: 'ProfileScreen',
passProps: {
text: 'Profile Screen'
}
}
}],
options: {
bottomTab: {
testID: 'PROFILE_TAB',
icon: sources[1],
},
topBar: {
title: {
text: 'John Doe',
}
}
}
}
}
]
},
},
},
}
});
});

我想要的是，当用户单击选项卡camera它应该打开一个模式/操作表，其中将显示他是否应该从相机胶卷中选择图像或应该打开相机的选项。为此，我想使用react-native-image-crop-picker.但是我如何实现这一点或如何自定义按钮标签按下操作？

我在谷歌上看过，但没有找到任何其他东西，除了这些链接对我没有多大帮助

https://github.com/wix/react-native-navigation/issues/3238

https://github.com/wix/react-native-navigation/issues/2766

https://github.com/wix/react-native-navigation/issues/3204

据说 v2 的文档比 v1 版本差。我正在使用这个包。大多数情况下，我试图通过查看源代码来解决我无法解决的问题。我必须说它很有用。这有点挑战性，但它确实有帮助。

值得再次记住;在 React 结构中，一切都是组件。

有很多方法;(现在想到的是什么)

您可以创建自己的组件并将其连接到底部选项卡。当此组件被触发时，您可以显示 wix 的模态或反应原生的模态。
虽然以上仍然有效;你可以用passProps来做到这一点。但请记住，当您执行此操作时，您链接到底部选项卡的页面也会出现。

作为解决方案;

您不必使用Wix的模态。坦率地说，我不喜欢它，因为我期待 Bootstrap 的模态风格，我使用的是 react-native 自己的模态。这是你的决定。

您可以使用我编写的任何 bottomTab 解决方案，也可以自己创建解决方案。Wix为此提供了很大的可能性。

您还可以在模式中添加可触摸的按钮，并指定是要打开相机还是图库。

我已经在模块的存储库中看到了示例代码。

如果我无法解释，我可以创建一个示例存储库：/

执行此操作的一种方法是使用 componentDidSeem 事件。每次将组件附加到视图层次结构(因此出现)时，都会调用此事件。它或多或少地以与 React Native 生命周期 API 相同的方式使用(例如 componentDidMount)，不同之处在于您需要根据文档 componentDidMount() (https://wix.github.io/react-native-navigation/#/docs/events?id=componentdidappear) "侦听"它。

然后，您可以在 Camera 组件的 componentDidAppear() 中使用一些逻辑来显示模态或叠加层，并将函数作为道具传递以更改 Camera 组件的状态并根据选择进行渲染。以下示例使用 RNN 文档中的 componentDidAppear() 示例。免责声明，我没有测试它，但它应该可以工作。

class Camera extends Component {
constructor(props){
super(props);
// Don't forget to bind the setMode function
this.setMode = this.setMode.bind(this);
// Edit: catch the tabchange
this.eventSubscription = Navigation.events().registerBottomTabSelectedListener(this.tabChanged);
this.state = {
mode: 'default'
}
}
componentDidMount() {
this.navigationEventListener = Navigation.events().bindComponent(this);
}
componentWillUnmount() {
// Not mandatory
if (this.navigationEventListener) {
this.navigationEventListener.remove();
}
}
componentDidAppear() {
Navigation.showModal({
component: {
// Example name, don't forget to register the modal screen
name: 'modals.ImageModeChoiceModal',
passProps: {
setMode: this.setMode,
// Edit pass the index of the unselected tab to the modal
fromTab: this.fromTab
}
}
});
}
setMode(mode){
this.setState({
mode: mode
});
}
// Edit: callback that will be fired on the bottomTabSelectedListener
// Tracks the selected and unselected tab index
tabChanged = (selectedTabIndex, unselectedTabIndex}) => {
this.fromTab = unselectedTabIndex;
}
render(){
if(this.state.mode === "camera"){
return( 
// Camera component
);
} else if(this.state.mode === "roll"){
return( 
// Camera roll component
);
} else {
return(
// Default component
// You could also choose to implement the user choice logic 
// here
)
}
}
}

编辑：作为后续问题，处理后退导航行为的问题出现了。在反向按下或模态关闭时，模态关闭并最终转到相机组件(在本例中为屏幕/选项卡)。这是因为选项卡已选中，并且模式在摄像机组件的"出现"时打开。导航道具不保存有关按下的选项卡的信息。因此，您需要在其他地方获取有关它的信息。您可以在 Camera 组件中添加导航事件侦听器，以截获选定和未选中的选项卡索引(例如：https://github.com/wix/react-native-navigation/issues/4109、文档：https://wix.github.io/react-native-navigation/#/docs/events?id=registerbottomtabselectedlistener)

在模态组件中，您应该添加一些逻辑来处理反向/反向行为(来源：https://facebook.github.io/react-native/docs/backhandler.html)：

...
componentDidMount() {
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
this.backHandler.remove()
}
handleBackPress = () => {
this.closeModal();
return true;
}
// Can also be used to implement close button behaviour (eg. on iOS)
closeModal(){
// Dismiss the modal itself
Navigation.dismissModal(this.props.componentId);
// This changes the active tab programmatically
// Don't forget to add a bottomTabsId to your bottomTabs configuration
Navigation.mergeOptions('bottomTabsId', {
bottomTabs: {
// Using the index of the unselected tab passed from the Camera component
currentTabIndex: this.props.fromTab
}
});
}
...

ps：根据 RNN 文档，dismissModal 将"mergeOptions"作为第二个参数，但我还没有使用或测试过它，但这可能意味着 Navigation.mergeOptions 可以集成到 Navigation.dismissModal 调用中。(文档： https://wix.github.io/react-native-navigation/#/docs/screen-api?id=dismissmodalcomponentid-mergeoptions)

相关内容

最新更新

热门标签：