[英]React-Native TabNavigator and Modals
I'm trying to use this library to show a custom modal dialog. 我正在尝试使用此库来显示自定义模式对话框。 I've a StackNavigator with three screens and on of these, the MainScreen, is a TabNavigator on which I set up the following header:
我有一个带有三个屏幕的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>
)
}
}
The second button opens a simple Alert (from react-native). 第二个按钮打开一个简单的Alert(来自react-native)。 With the first button I would open a custom modal to show app and developer details.
使用第一个按钮,我将打开一个自定义模式以显示应用程序和开发人员的详细信息。
The main screen has the following render method; 主屏幕具有以下渲染方法;
render(): JSX.Element {
return (
<TabContent />
)
}
where TabContent is simply my tabs configuration: 其中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'
}
}
})
The library linked above requires a layout like this: 上面链接的库需要这样的布局:
<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>
but if I put TabContent
tab inside that view the tab navigator doesn't work anymore. 但是,如果我将
TabContent
标签放在该视图中,则标签导航器将无法再使用。
Is there a way to make my TabNavigator and Modal from that library work together? 有没有办法使该库中的TabNavigator和Modal一起工作?
I found a solution. 我找到了解决方案。 Using
Container
as root component allow to nest the TabContent
aside other components: 使用
Container
作为根组件,可以将TabContent
嵌套在其他组件之外:
render(): JSX.Element {
return (
<Container>
<Spinner visible={this.props.isLoggingOut} textContent={'Disconnessione in corso...'} textStyle={{color: '#FFF'}} />
<TabContent screenProps={{ isAdmin: this.props.isAdmin }} />
<Modal style={styles.aboutModal} position={'center'} ref={'aboutModal'} isDisabled={false}>
<Text>Modal centered</Text>
</Modal>
</Container>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.