Мне нужно отобразить модальное окно, когда пользователь нажимает среднюю кнопку. Я использую react-native-raw-bottom-sheet
библиотеку для предоставления модального окна моему приложению. Я попытался передать опору isFocused={props.navigation.isFocused}
внутри ‹Tab.Screen›, но проблема в том, что я передаю опору в based if is or not focus in the is rendered two times вместо одного.
Я также попытался вызвать модальное окно напрямую, но безуспешно.
Моя проблема заключается в том, что когда пользователь нажимает, мне нужно отобразить новый, который будет содержать логику дыр в содержимом в модальном окне, а также будет отображать модальный.
Мой tab.routes.js
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import TabButton from '../components/Tab/Button';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Home from '../containers/Home';
import Adjustment from '../containers/Adjustment';
import Graphic from '../containers/Graphic';
import Help from '../containers/Help';
import NewTransaction from '../containers/NewTransaction';
const icons = {
Home: {
name: 'home',
},
Graphic: {
name: 'pie-chart',
},
NewTransaction: {
name: 'notifications-none',
},
Help: {
name: 'help-outline',
},
Adjustment: {
name: 'settings',
},
};
const Tab = createBottomTabNavigator();
const TabRoutes = () => (
<Tab.Navigator
initialRouteName="HomeScreen"
screenOptions={({route, navigation}) => ({
tabBarIcon: ({color, size, focused}) => {
if (route.name === 'NewTransaction') {
return <TabButton focused={focused} onPress={() => navigation.navigate('NewTransaction')} />;
}
const {name} = icons[route.name];
return <Icon name={name} size={size} color={color} />;
},
})}
tabBarOptions={{
keyboardHidesTabBar: true,
activeTintColor: '#f8b006',
inactiveTintColor: '#1C3041',
style: {
height: 60,
},
iconStyle: {
marginTop: 5,
},
labelStyle: {
fontSize: 12,
marginBottom: 10,
},
}}>
<Tab.Screen
options={{
title: 'Home',
}}
name="Home"
component={Home}
/>
<Tab.Screen
options={{
title: 'Gráfico',
}}
name="Graphic"
component={Graphic}
/>
<Tab.Screen
options={{
title: '',
}}
name="NewTransaction"
component={NewTransaction}
/>
<Tab.Screen
options={{
title: 'Ajuda',
}}
name="Help"
component={Help}
/>
<Tab.Screen
options={{
title: 'Ajustes',
}}
name="Adjustment">
{(props) => (
<Adjustment isVisible={props.navigation.isFocused()} onPress={() => props.navigation.navigate('Home')} />
)}
</Tab.Screen>
</Tab.Navigator>
);
export default TabRoutes;
Tab / Button / index.js
import React from 'react';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Button from './styles';
const TabButton = ({onPress, focused}) => {
return (
<TouchableWithoutFeedback onPress={onPress}>
<Button focused={focused}>
<Icon name="add" size={35} color={'white'} />
</Button>
</TouchableWithoutFeedback>
);
};
export default TabButton;
И компонент, который будет отображать модальное содержимое
import React from 'react';
import {Text, View} from 'react-native';
const NewTransaction = ({isVisible}) => {
return (
<View>
<Text>Welcome to NewTransactions </Text>
</View>
);
};
export default NewTransaction;