StackNavigatorは複数のレベルをネストできません。

Question

私は自分の反応ネイティブアプリケーションにstacknavigatorを使用する方法を学ぼうとしています。しかし、このシステムは、一度クラッシュし、私は、ページ階層内のレベル2でだと私はメッセージを取得：

エラーにより、管理ビューの更新プロパティ「accessibilityLabel」しばらく：RTCView

をすべての私アプリにはRegionという単語があります。 「地域」をクリックすると、「一般」という言葉が表示されます。 「一般」という言葉を押すと、空の画面が表示されますが、代わりに上記のエラーとクラッシュが発生します。

ここでは私の単純なプロジェクトへのコードです：

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>; 
    } 
} 

私は間違っていますか？私はちょうど空の互換性の画面を見て、このクラッシュを取り除きたい。

Answer 1

反応ナビゲーションに問題はありません。あなたは反応ナビゲーションを使って入れ子にすることができます。私はこれとそのうまく動作しています。私は自分のコードをテストしたときに、反応のナビゲーションではなく、このエラーを生成するコードの内部に間違いがあることがわかりました。ナビゲーションオプション内のRegionsクラスのコードでは、文字列でタイトルを取得するオブジェクトスタイルを小道具に宣言しました。より明確にするため、以下のコードをチェック： -

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' 
    } 
}; 

私はちょうどあなたのコードを実行し、その問題を修正した後に正常に動作します。まだ疑問がある場合はお知らせください:)