当要查看时，堆栈导航器返回 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',
    },
  },
});