React-Native TabNavigator和Modals

我正在嘗試使用this庫來顯示自定義模式對話框。我有個StackNavigator具有三個屏幕和對這些中，MainScreen，是在其上我建立下面的頭一個TabNavigator的：React-Native TabNavigator和Modals

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> 
     ) 
    } 
}

第二按鈕將打開一個簡單的警報（從反應天然）。用第一個按鈕，我會打開一個自定義模式來顯示應用程序和開發人員的詳細信息。

主屏幕有以下渲染方法;

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從這個庫一起工作？

來源

2017-07-28 Androidian

我找到了解決方案。使用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> 
    ) 
}

來源

2017-07-29 11:58:08 Androidian

React-Native TabNavigator和Modals

回答

相關問題