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不能嵌套多個級別？

回答

相關問題