Я пытаюсь использовать эту библиотеку для отображения настраиваемого модального диалогового окна. У меня есть StackNavigator с тремя экранами, и один из них, MainScreen, представляет собой TabNavigator, на котором я установил следующий заголовок:
static navigationOptions = ({navigation}) => {
const { params } = navigation.state
return {
headerRight: (
<Content>
<Grid>
<Col style={styles.headerButton}>
<TouchableHighlight style={styles.infoButton} onPress={() => {params._onAbout()}} underlayColor='lightgrey'>
<Icon ios='ios-information-circle' android='md-information-circle' style={{fontSize: 24}} />
</TouchableHighlight>
</Col>
<Col style={styles.headerButton}>
<TouchableHighlight style={styles.logoutButton} onPress={() => {params._onLogout()}} underlayColor='lightgrey'>
<Icon ios='ios-exit-outline' android='md-exit' style={{fontSize: 24}} />
</TouchableHighlight>
</Col>
</Grid>
</Content>
)
}
}
Вторая кнопка открывает простое оповещение (от react-native). С помощью первой кнопки я открывал настраиваемое модальное окно, чтобы показать сведения о приложении и разработчике.
Главный экран имеет следующий метод рендеринга;
render(): JSX.Element {
return (
<TabContent />
)
}
где TabContent - это просто моя конфигурация вкладок:
const TabContent: NavigationContainer = TabNavigator({
Courses: {
screen: CoursesScreen,
navigationOptions: ({ navigation }) => ({
// title: `${navigation.state.params.user}'s Courses`,
tabBarLabel: 'Corsi',
tabBarIcon: ({ tintColor, focused }) => (
<Icon ios={focused ? 'ios-calendar' : 'ios-calendar-outline'} android='md-calendar' style={{fontSize: 18, color: tintColor}} />
)
})
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
// title: `${navigation.state.params.user}'s Profile`,
tabBarLabel: 'Profilo',
tabBarIcon: ({ focused, tintColor }) => (
<Icon ios={focused ? 'ios-person' : 'ios-person-outline'} android='md-person' style={{fontSize: 18, color: tintColor}} />
)
})
}
}, {
tabBarOptions: {
activeTintColor: '#F3E03B',
showIcon: true,
labelStyle: {
fontWeight: 'bold'
},
style: {
backgroundColor: 'black'
}
}
})
Библиотека, ссылка на которую приведена выше, требует такого макета:
<View style={styles.wrapper}>
<Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
<Text style={styles.text}>Modal centered</Text>
<Button onPress={() => this.setState({isDisabled: !this.state.isDisabled})} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
</Modal>
</View>
но если я помещу TabContent
вкладку внутрь этого представления, навигатор вкладок больше не будет работать.
Есть ли способ заставить мой TabNavigator и Modal из этой библиотеки работать вместе?