StackNavigator 不能多层嵌套?
StackNavigator can't nest multiple levels?
我正在尝试学习如何将 stacknavigator 用于我的 react-native 应用程序。但是一旦我在页面层次结构中处于第 2 级并且我收到消息,系统就会一直崩溃:
Error while updating property 'accessibilityLabel' of a view manage by: RTCView
我的应用程序所做的只是显示一个表示区域的词。如果单击“区域”,您会看到“常规”一词。当您按下“常规”一词时,您应该会看到一个空白屏幕,但我却收到上述错误和崩溃。
这是我的简单项目的代码:
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
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
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
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>;
}
}
我做错了什么?我只想看到空的兼容性屏幕,并摆脱这种崩溃。
react导航没有问题。您可以使用反应进行嵌套 navigation.I 已经使用过它并且它工作正常。当我测试你的代码时,我发现你在代码中犯了一个错误,它产生了这个错误而不是反应导航。在导航选项中 Regions class 的代码中,您刚刚在 prop 中声明了一个 object 样式,该样式采用带有字符串的标题。如需更多说明,请查看以下代码:-
static navigationOptions = {
title: 'Pick Region',
headerStyle: {
backgroundColor:'#F00'
},
headerTitleStyle: {
color:'#fff'
},
headerTruncatedBackTitle:{
color:'#fff'
},
headerTruncatedBackTitle =======>>>>> this is the title which accepts only string, This is not a style for the header truncated back title
headerBackTitle:{
color:'#fff'
},
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'
}
};
我只是 运行 你的代码,在更正这些问题后它工作正常。如果您还有任何疑问,请告诉我:)
我正在尝试学习如何将 stacknavigator 用于我的 react-native 应用程序。但是一旦我在页面层次结构中处于第 2 级并且我收到消息,系统就会一直崩溃:
Error while updating property 'accessibilityLabel' of a view manage by: RTCView
我的应用程序所做的只是显示一个表示区域的词。如果单击“区域”,您会看到“常规”一词。当您按下“常规”一词时,您应该会看到一个空白屏幕,但我却收到上述错误和崩溃。
这是我的简单项目的代码:
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
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
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
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>;
}
}
我做错了什么?我只想看到空的兼容性屏幕,并摆脱这种崩溃。
react导航没有问题。您可以使用反应进行嵌套 navigation.I 已经使用过它并且它工作正常。当我测试你的代码时,我发现你在代码中犯了一个错误,它产生了这个错误而不是反应导航。在导航选项中 Regions class 的代码中,您刚刚在 prop 中声明了一个 object 样式,该样式采用带有字符串的标题。如需更多说明,请查看以下代码:-
static navigationOptions = {
title: 'Pick Region',
headerStyle: {
backgroundColor:'#F00'
},
headerTitleStyle: {
color:'#fff'
},
headerTruncatedBackTitle:{
color:'#fff'
},
headerTruncatedBackTitle =======>>>>> this is the title which accepts only string, This is not a style for the header truncated back title
headerBackTitle:{
color:'#fff'
},
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'
}
};
我只是 运行 你的代码,在更正这些问题后它工作正常。如果您还有任何疑问,请告诉我:)