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，那么一切都按预期开始工作。

将导航器嵌套在反应导航中并在内部导航到外部导航之间导航

1 个答案: