reactjs - 使用 React Navigation 将道具从 StackNavigator 传递到屏幕

Question

我正在尝试使用 AsyncStorage 加载设置并将一些道具设置到下一个屏幕。我使用sortBy值对数据库结果进行排序。

如果我从 App 传递道具，screenProps它会导致更多渲染，因为sortBy加载值需要时间。由于AuthLoadingScreen决定了要渲染的内容，我想通过将道具直接传递给 MainList 来减少渲染的数量

AuthLoadingScreen.js

export default class AuthLoadingScreen extends Component {
    constructor(props) {
      super(props);
      this._bootstrapAsync();
    }

    // Fetch the token from storage then navigate to our appropriate place
    _bootstrapAsync = async () => {
      const userToken = await AsyncStorage.getItem('token');
      const sortValue = await AsyncStorage.getItem('sortBy');
      if (userToken) {

        this.props.navigation.navigate('App',{"sortBy":sortValue}); // I can't send this back to  MainList of AppStack
      } else {
        this.props.navigation.navigate('Onboarding');
      }
    };

    render() {
      return (
        <View>
          <ActivityIndicator />
          <StatusBar barStyle="default" />
        </View>
      );
    }
  }

应用程序.js

export default class App extends Component<Props> {

  render() {
    return (
      <Root>
      <AppContainer/>
      </Root>
    );
  }
}

const AppStack = createStackNavigator(
  {
   MainList: {
      screen: MainListScreen // how to pass props from AppStack to MainListScreen ?
    },
    Settings: {
      screen: Settings,
    }
  },
  {
    initialRouteName:"MainList",
    defaultNavigationOptions: () => ({
      headerStyle: {
        backgroundColor: '#2196f3'
      },
      headerTintColor: 'white'
    })
  }
);

const AppNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    Onboarding:Onboarding,
    App: AppStack, //logged in users
  },
  {
    initialRouteName: 'AuthLoading',
  }
);



const AppContainer = createAppContainer(AppNavigator);

标签： reactjsreact-nativereact-navigation

Answer 1

你可以尝试这样的事情：

AuthLoadingScreen.js

_bootstrapAsync = async () => {
  const userToken = await AsyncStorage.getItem('token');
  const sortBy = await AsyncStorage.getItem('sortBy');

  if (userToken) {
    this.props.navigation.navigate('App', { sortBy })
  } else {
    this.props.navigation.navigate('Onboarding');
   }
};

然后在 MainListScreen 文件中访问sortBy如下：

MainListScreen.js

this.props.navigation.state.params.sortBy