stack navigator return 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 语句作为按钮回调的一部分 returns：假。

当我点击按钮 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',
    },
  },
});

stack navigator return false 想去查看的时候

stack navigator return false when want to go to view

javascript

navigation

react-native