当要转到视图时，堆栈导航器返回false

Question

我的应用程序启动后，首先打开HomeScreen组件。

我的App.js文件如下所示：

const App = createStackNavigator({
HomeScreen: {
screen: HomeScreen,
navigationOptions: {
title: 'HomeScreen',
},
List: {
screen: List,
navigationOptions: {
title: 'List',
},
},
},
});

我的HomeScreen.js文件如下所示：

export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
Cars: [],
};
var d = new Database();
d.initDB();
let cars = [];
d.listCar().then(data => {
cars = data;
this.setState({
cars,
});
});
}
render() {
return (
<View
style={{
flex: 1,
backgroundColor: 'white',
flexDirection: 'column',
}}>
<MyText text="Auta" />
<Button
title="Audi"
onPress={() =>
console.log(this.props.navigation.navigate('List')) //console log for debuging
}
/>
<Button
title="Volkswagen"
onPress={() =>
this.props.navigation.navigate('List', {car_id: 1}) //want to pass props to List.js
}
/>
</View>
);
}
}

我的List.js:

const List = props => {
return (
<View>
<Text>{props.car_id}</Text>
</View>
);
};

当我在HomeScreen组件中单击标题为Audi的按钮时，作为按钮回调的一部分的console.log语句将返回：false。

当我单击按钮Volskwagen或Audi时，不会发生任何事情。

我想从HomeScreen组件转到List组件，并用道具将car_id从HomeScreen传递到List。

为什么上面的代码没有将我从HomeScreen组件重定向到List组件？

Answer 1

您似乎已经将List放入了HomeScreen值中，而React Navigation希望它与HomeScreen在同一级别上声明，如下所示：

const App = createStackNavigator({
HomeScreen: {
screen: HomeScreen,
navigationOptions: {
title: 'HomeScreen',
},
}
List: {
screen: List,
navigationOptions: {
title: 'List',
},
},
});