StackNavigator无法嵌套多个级别? [英] StackNavigator can't nest multiple levels?
问题描述
我正在尝试学习如何对我的本机应用程序使用stacknavigator.但是，一旦我进入页面层次结构的第2级并收到消息，系统就会不断崩溃:
I'm trying to learn how to use the stacknavigator for my react-native application. But the system keeps crashing once I'm at level 2 in the page hierarchy and I get the message:
更新视图的属性"accessibilityLabel"时出错:RTCView
Error while updating property 'accessibilityLabel' of a view manage by: RTCView
我的所有应用程序都在显示一个单词Region.如果单击Region，您将看到General一词.当您按General一词时，您应该会看到一个空白屏幕，但是，我得到了上面提到的错误和崩溃.
All my app does is present a word that says Region. If you click on Region, you'll see the word General. When you press the word General, you should see an empty screen, but instead, I get the error and crash mentioned above.
这是我的简单项目的代码:
Here's the code to my simple project:
index.android.js
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);
components/Home.js
components/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;
components/Regions.js
components/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>}
/>
);
}
}
components/Compatibility.js
components/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>;
}
}
我做错了什么?我只想查看空白的兼容性"屏幕，并摆脱崩溃的情况.
What am I doing wrong? I just want to see the empty Compatibility screen, and get rid of this crashing.
推荐答案
React导航没有问题.您可以使用react导航嵌套.当我测试您的代码时，我发现您在代码中犯了一个错误，该错误会产生此错误，而不是反应导航.在导航选项内 Regions 类的代码中，您刚刚在prop中声明了对象样式，该样式使用标题和字符串.有关更多说明，请参见下面的代码:-
There is no problem with the react navigation. You can go nested using the react navigation.I have used this and its working fine. When i tested your code i found that there is a mistake you are making inside your code which produces this error not the react navigation. In your code for the Regions class inside your navigation options, you just declared a object style in the prop which takes the title with a string. For more clarification check the code below:-
static navigationOptions = {
title: 'Pick Region',
headerStyle: {
backgroundColor:'#F00'
},
headerTitleStyle: {
color:'#fff'
},
headerTruncatedBackTitle:{
color:'#fff'
},
headerTruncatedBackTitle ======= >>>>>这是仅接受字符串的标题，这不是标题被截断的后置标题的样式
headerTruncatedBackTitle =======>>>>> this is the title which accepts only string, This is not a style for the header truncated back title
headerBackTitle:{
color:'#fff'
},
headerBackTitle ======= >>>>>这是仅接受字符串的标题，这不是标题后面标题的样式
headerBackTitle =======>>>>> this is the title which accepts only string, This is not a style for the header back title
headerBackTitleStyle:{
color:'#fff'
},
headerTruncatedBackTitle:{
color:'#fff'
}
};
我只是在更正这些内容之后运行您的代码，它的工作正常.让我知道您是否还有任何疑问:)
I just ran your code and its working fine after correcting the things. Let me know if you still have any doubts :)
这篇关于StackNavigator无法嵌套多个级别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
