StackNavigator不能嵌套多个级别？

我在学习如何使用stacknavigator作为我的react-native应用程序。但该系统不断崩溃一旦我在页面层次结构2级和我得到的消息：StackNavigator不能嵌套多个级别？

错误，同时更新属性“accessibilityLabel”的视图通过管理：RTCView

我的全部应用程序会提供一个说“地区”的字词。如果你点击地区，你会看到一般的单词。当你按下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>; 
    } 
}

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

来源

2017-09-23 John

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

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

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

headerBackTitle:{ 
     color:'#fff' 
    },

headerBackTitle ======= >>>>>这是只接受字符串标题，这不是头回标题

0123风格

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

我刚刚运行了您的代码，并且在纠正这些事情后工作正常。让我知道如果你仍然有任何疑问:)

来源

2017-09-24 16:39:55

StackNavigator不能嵌套多个级别？

回答

相关问题