React Native：从标签栏按钮显示模式视图答案

【问题标题】：React Native : Show a modal view from a tabbar buttonReact Native：从标签栏按钮显示模式视图
【发布时间】：2022-08-04 21:13:11
【问题描述】：

我正在为我的应用程序使用 React Native。一切都很顺利，除了一件事。

我想实现一个模式视图，当用户单击选项卡栏的中间按钮 (+) 时显示该视图。它看起来像 Youtube 应用程序。

几天后，我没有找到有效的解决方案。

这是我的标签栏和导航器的代码。

标签栏：

export default function App() {
  return (
    <NavigationContainer >
      <Tabs.Navigator tabBarOptions={{labelStyle: {fontSize:14}, activeTintColor: \'purple\', showLabel: false}  } 
> 
        <Tabs.Screen name=\"Ventes\" component={venteScreenNavigator} 
        options={{
            headerShown: false,
            tabBarIcon: ({ focused }) => (
              <View style={{ alignItems: \"center\", justifyContent: \"center\" }}>
                <Image
                  source={require(\"./assets/Buy.png\")}
                  resizeMode=\"contain\"
                  style={{
                    width: 25,
                    height: 25,
                    tintColor: focused ? \"black\" : \"gray\",
                  }}
                />
              </View>
            ),
          }}
          />
        <Tabs.Screen name=\"Map\" component={mapScreenNavigator}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: \"center\", justifyContent: \"center\" }}>
              <Image
                source={require(\"./assets/geolocalisationicone.png\")}
                resizeMode=\"contain\"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? \"black\" : \"gray\",
                }}
              />
            </View>
          )
        }}
        />
        
        <Tabs.Screen name=\"Liste\" component={listeScreenNavigator}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: \"center\", justifyContent: \"center\" }}>
              <Image
                source={require(\"./assets/Document.png\")}
                resizeMode=\"contain\"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? \"black\" : \"gray\",
                }}
              />
            </View>
          ),
        }}
        />
        <Tabs.Screen name=\"Espace\" component={espaceScreenNavigator}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: \"center\", justifyContent: \"center\" }}>
              <Image
                source={require(\"./assets/monespaceicone.png\")}
                resizeMode=\"contain\"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? \"black\" : \"gray\",
                }}
              />
            </View>
          ),
        }}
        />
        
      </Tabs.Navigator>
    </NavigationContainer>
    
  )
}

导航：

const venteScreenNavigator = () => {
    return (

        <stack.Navigator>
            <stack.Screen name=\"Ventes\" component={Ventes} 
            options={{
                headerRight: ()=> (
                    
                   <View style={{flexDirection: \'row\', marginRight: 10}}>
                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Plus.png\')}>
                        </Image>
                        </TouchableOpacity>

                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Chat.png\')}>
                        </Image>
                        </TouchableOpacity>
                   </View>        
                )                
            }}
            />
            <stack.Screen name=\"Screens\" component={Screens}
            />
        </stack.Navigator>
    )
}

export {venteScreenNavigator}





const mapScreenNavigator = () => {
    return (
        <stack.Navigator>
            
            <stack.Screen name=\"Map\" component={Map}
            options={{
                headerRight: ()=> (
                    
                   <View style={{flexDirection: \'row\', marginRight: 10}}>
                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Plus.png\')}>
                        </Image>
                        </TouchableOpacity>

                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Chat.png\')}>
                        </Image>
                        </TouchableOpacity>
                   </View>                 
                )               
            }}
            />
            <stack.Screen name=\"Screens\" component={Screens}
            />
        </stack.Navigator>
    )
}

export {mapScreenNavigator}

const listeScreenNavigator = () => {
    return (
        <stack.Navigator>
            <stack.Screen name=\"Liste\" component={Liste}
            options={{
                headerRight: ()=> (
                    
                   <View style={{flexDirection: \'row\', marginRight: 10}}>
                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Plus.png\')}>
                        </Image>
                        </TouchableOpacity>

                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Chat.png\')}>
                        </Image>
                        </TouchableOpacity>

                   </View>
                    
                    
                )
                
            }}
            />
            <stack.Screen name=\"Screens\" component={Screens}
            />
        </stack.Navigator>
    )
}

export {listeScreenNavigator}

const espaceScreenNavigator = () => {
    return (
        <stack.Navigator>
            <stack.Screen name=\"Espace\" component={Espace}
            options={{
                headerRight: ()=> (
                    
                   <View style={{flexDirection: \'row\', marginRight: 10}}>
                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Plus.png\')}>
                        </Image>
                        </TouchableOpacity>

                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Chat.png\')}>
                        </Image>
                        </TouchableOpacity>

                   </View>
                )
                
            }}
            />
            <stack.Screen name=\"Screens\" component={Screens}
            />
            <stack.Screen name=\"Profil\" component={Profil}
            options={{
                headerRight: ()=> (
                    
                   <View style={{flexDirection: \'row\', marginRight: 10}}>
                        <TouchableOpacity>
                        <Image
                        style={styles.image}
                        source={require(\'../assets/Setting.png\')}>
                        </Image>
                        </TouchableOpacity>
                   </View>                    
                )               
            }}
            />
            <stack.Screen name=\"ModifierProfil\" component={ModifierProfil}
            />           
        </stack.Navigator>
      
    )
}

export {espaceScreenNavigator}

你能告诉我当用户点击标签栏按钮时如何显示模式吗？

多谢你们！

为标签栏创建自定义 UI，react-navigation 提供了一个道具，您可以使用它为标签栏创建自定义 UI。因此，您将创建自定义 UI，单击“+”图标即可打开模式。我建议你使用\'react-native-modal\'。 <Tab.Navigator tabBar={props => <MyCustomTabBar {...props} />}> 在这个MyCustomTabBar 中，您可以编写自定义标签栏，并可以在其中编写您需要的模态代码。
我想你在这里寻找底页：github.com/gorhom/react-native-bottom-sheet

标签： javascript react-native modal-dialog tabbar

【解决方案1】：

**Try this code**
   
 const PopUpTask = ({navigation}) => {
        React.useEffect(() => {
          const unsubscribe = navigation.addListener('tabPress', e => {
            // Prevent default behavior
            e.preventDefault();
    // Here you create it
            alert('Default behavior prevented');
            // Do something manually
            // ...
          });
    
          return unsubscribe;
        }, [navigation]);
    
        return (
          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Home!</Text>
          </View>
        );
      };

【讨论】：