嵌套在航海家反應，導航和一個內間導航外一個

Question

在我的應用程序目前，我有以下航海家

 
StackNavigator 
    | 
    | 
    - Login Screen (Regular React Component) 
    - Home Screen (Tab Navigator) 
    - Settings Screen (Regular React Component) 

TabNavigator (Home) 
    | 
    | 
    - Tab1 (Regular React Component) 
    - Tab2 (Stack Navigator) 
    - Tab3 (Regular React Component) 

第二個選項卡時，我嘗試過這種做法如何以往顯示空白屏幕。我在開發控制檯中看不到任何錯誤。不知道它爲什麼顯示空白屏幕。

下面是上述

export class Login extends React.Component { 
    static navigationOptions = { 
    title: 'Login', 
    } 
    render(){ 
    return(
     <View> 
     <Text> Login Screen </Text> 
     <Button onPress={()=> this.props.navigation.navigate('HomeNavigation')} /> 
     </View> 
    ) 
    } 
} 

export class SettingsScreen extends Component { 
    static navigationOptions = { 
    title: 'Settings', 
    } 
    render(){ 
    return(
     <View> 
     <Text> Settings Screen </Text> 
     </View> 
    ) 
    } 
} 

export class PersonScreen extends Component { 
    static navigationOptions = { 
    title: 'Person', 
    } 
    render(){ 
    return(
     <View> 
     <Text> Person Screen </Text> 
     </View> 
    ) 
    } 
} 





export class Tab1 extends Component { 

    static navigationOptions = { 
    title: 'Tab1', 
    } 

    constructor(props){ 
    super(props); 
    this.goToPersonScreen = this.goToPersonScreen.bind(this); 
    } 

    goToPersonScreen(){ 
    this.props.navigation.navigate('PersonScreen'); 
    } 

    render(){ 
    return(
     <View> 
      <Text> Tab 1 Screen </Text> 
      <Button onPress={this.goToPersonScreen} title='Person Screen' /> 
     </View> 
    ) 
    } 
} 

export class Tab2 extends Component { 

    static navigationOptions = { 
    title: 'Tab2', 
    } 

    render(){ 
    return(
     <View> 
      <Text> Tab 2 Screen </Text> 
     </View> 
    ) 
    } 
} 

export const HomeContainer = new TabNavigator({ 
    Tab1 : { screen: Tab1}, 
    Tab2: {screen: Tab2} 
}) 

export class HomeNavigation extends Component { 
    static navigationOptions = { 
    title: 'Home Navigation', 
    } 
    render(){ 
    return(
     <View> 
      <View> 
       <Button onPress={()=> {this.props.navigation.navigate('Settings')}} title='Settings'/> 
      </View> 
      <View> 
       <HomeContainer/> 
      </View> 
     </View> 

    ) 
    } 
} 

export const LoginNavigation = new StackNavigator({ 
    Login: { screen: Login}, 
    Settings: {screen: SettingsScreen}, 
    HomeNavigation : { screen: HomeNavigation}, 
    PersonScreen : { screen: PersonScreen} 
},{ 
    headerMode:'screen' 
}) 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <LoginNavigation/> 
     </View> 
    ); 
    } 
} 



const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 
    /*paragraph: { 
    margin: 24, 
    fontSize: 18, 
    fontWeight: 'bold', 
    textAlign: 'center', 
    color: '#34495e', 
    },*/ 
}); 

Answer 1

沒關係的代碼示例。問題是沒有Style屬性的視圖。一旦我添加了flex：1，那麼一切都開始按預期工作。