ネストナビゲーター反応し、ナビゲーション中に、私のアプリでは、1つの

Question

外側に内側の間を移動する現在、私はこのアプローチをしようとしたときに2つ目のタブは空白の画面を示してどのようにこれまでに以下のナビゲーター

 
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属性のないビューでした。フレックス：1を追加すると、すべてが期待どおりに動作するようになりました。