StackNavigator 不能嵌套多个级别？

Posted 2023-02-19

【中文标题】StackNavigator 不能嵌套多个级别？

【英文标题】：StackNavigator can't nest multiple levels?

【发布时间】：2018-03-05 00:52:34

【问题描述】：

我正在尝试学习如何将 stacknavigator 用于我的 react-native 应用程序。但是一旦我在页面层次结构中处于第 2 级并且我收到消息，系统就会不断崩溃：

更新由 RTCView 管理的视图的属性“accessibilityLabel”时出错

我的应用程序所做的只是呈现一个单词，表示区域。如果单击区域，您将看到“通用”一词。当您按“General”一词时，您应该会看到一个空白屏幕，但相反，我收到了上面提到的错误和崩溃。

这是我的简单项目的代码：

index.android.js

import React,  Component  from 'react';
import App from './components/Home';
import 
  AppRegistry,
  View
 from 'react-native';

export default class myapp extends Component 
  render() 
    return (
        <App />
    );
  



AppRegistry.registerComponent('myapp', () => myapp);

组件/Home.js

import React,  Component  from 'react';
import StackNavigator from 'react-navigation';
import Regions from './Regions';
import Compatibility from './Compatibility';

import 
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Linking
 from 'react-native';

class Home extends Component 
  static navigationOptions = 
    title: 'Login',
    headerStyle: 
        backgroundColor:'#000000'
            ,
    headerTitleStyle: 
        color:'#fff'
    
  ;
  render()
    const navigate = this.props.navigation;
    return (
      <View style=styles.container>
        <Text style=styles.instructions onPress=()=>navigate('Regions',realm:'blah')>
            Regions
        </Text>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,

  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);


const myscreens = StackNavigator(
  Home: screen: Home,
  Regions:screen:Regions,
  Compatibility:screen:Compatibility
);

export default myscreens;

组件/Regions.js

import React,  Component  from 'react';
import StackNavigator from 'react-navigation';

import 
  Text,
  View,
  FlatList
 from 'react-native';

export default class Regions extends Component 
  static navigationOptions = 
    title: 'Pick Region',
    headerStyle: 
        backgroundColor:'#F00'
    ,
    headerTitleStyle: 
        color:'#fff'
    ,
    headerTruncatedBackTitle:
        color:'#fff'
    ,
    headerBackTitle:
        color:'#fff'
    ,
    headerBackTitleStyle:
        color:'#fff'
    ,
    headerTruncatedBackTitle:
        color:'#fff'
    
  ;
    constructor(props)
    
        super(props);
    
  render() 


    const navigate = this.props.navigation;

    let data = [
    regionName:'General',numOfDimensions:2
    ];

    return (
        <FlatList
          data=data
          keyExtractor=(item, index) => index
          renderItem=(item) => <Text onPress=()=>navigate('Compatibility',item:item)>item.regionName</Text>
        />
    );

  

组件/Compatibility.js

import React,  Component  from 'react';

import 
  Text,
  View,
  FlatList
 from 'react-native';

export default class Compatibility extends Component 
  static navigationOptions = 
    title: 'Pick Region',
    headerStyle: 
        backgroundColor:'#F00'
    ,
    headerTitleStyle: 
        color:'#fff'
    ,
    headerTruncatedBackTitle:
        color:'#fff'
    ,
    headerBackTitle:
        color:'#fff'
    ,
    headerBackTitleStyle:
        color:'#fff'
    ,
    headerTruncatedBackTitle:
        color:'#fff'
    
  ;

    constructor(props)
    
        super(props);
    

  render() 

    console.log('Compatibility');
    return <View></View>;
  

我做错了什么？我只想看到空的兼容性屏幕，并摆脱这种崩溃。

【参考方案1】：

react 导航没有问题。您可以使用反应导航进行嵌套。我已经使用它并且它工作正常。当我测试你的代码时，我发现你在代码中犯了一个错误，它产生了这个错误而不是反应导航。在导航选项中 Regions 类的代码中，您刚刚在 prop 中声明了一个对象样式，该样式采用字符串的标题。有关更多说明，请查看以下代码：-

static navigationOptions = 
    title: 'Pick Region',
    headerStyle: 
        backgroundColor:'#F00'
    ,
    headerTitleStyle: 
        color:'#fff'
    ,
    headerTruncatedBackTitle:
        color:'#fff'
    ,   

headerTruncatedBackTitle =======>>>>> 这是只接受字符串的标题，这不是标题截断后标题的样式

    headerBackTitle:
        color:'#fff'
    ,   

headerBackTitle =======>>>>> 这是只接受字符串的标题，这不是标题返回标题的样式

    headerBackTitleStyle:
        color:'#fff'
    ,
    headerTruncatedBackTitle:
        color:'#fff'
    
;

我刚刚运行了您的代码，并且在纠正了这些问题后它工作正常。如果您仍有任何疑问，请告诉我:)