时间戳

首页 > 解决方案 > React Native 导航共享标题元素

reactjs - React Native 导航共享标题元素

问题描述

我正在使用 react native 和 react-navigation 我想完成以下操作：

我有一个组件人员详细信息，我从 API 接收一些数据：头像、许可证、城市

在那个组件中，我有 2 个按钮可以转到单独的页面。

但我有一个名为这是他们三个人共享的

因此，当我在第一个组件PersonDetails中接收在这些组件之间共享的数据时。

我在第一个组件人物详细信息中收到的那些道具我希望它们在PersonExtended和PersonLocation之间共享，但不将它们作为道具传递，因为头像图像是 base64 并且可能很大。

那么有没有其他方法可以做到这一点？

人员详情：

export const PersonDetails = ({navigation, route}) => {


  /** Get user ID From parameters **/
  const {userId} = route.params;

  /** Redux selectors **/
  const {person = null, loading = true} = useSelector(state => state.vehicles);


  const dispatch = useDispatch();

  // const insets = useSafeAreaInsets();




  /**
   * Mounted hook, loads vehicle info
   */
  useEffect(() => {
    dispatch(userActions.getUser({userId}));
  }, []);


  /**
   * Handle navigaton between card
   * @param {string} routeName
   */
  const handleNavigation = (routeName) => {
        navigation.navigate(routeName, {userId, 
        userInfo:
            {
              carAvatar: person.avatar,
              licencePlate: person.licencePlate,
              city: person.city
            }
        });
  };

  /**
   * Handle Click on X button in right corner
   */
  const handleBackNavigation = () => {
    navigation.goBack();
  };

  if (loading) {
    return <AnimatedLoader />;
  }
  return (
    <View style={{flex: 1, paddingBottom: insets.bottom}}>
      {/* Top header  */}
      <PersonInfo
        carAvatar={person.avatar}
        licencePlate={person.licencePlate}
      />
      {/* Top header  */}
      <ScrollView>
        <View style={styles.container}>
          <Button
            title={'extended info'} leftIcon="information-outline"
            onPress={() => handleNavigation('PersonExtendedDetails')} />
           <Button
            title={'location'} leftIcon="information-outline"
            onPress={() => handleNavigation('PersonLocation')} />
        </View>
      </ScrollView>
    </View>
  );
};


export default PersonDetails;

人员扩展：

export const PersonExtended = ({navigation, route}) => {


  /** Get user ID From parameters **/
  const {userId} = route.params;

  /** Redux selectors **/
  const {personExtended = null, loading = true} = useSelector(state => state.personExtended);


  const dispatch = useDispatch();





  /**
   * Mounted hook, loads vehicle info
   */
  useEffect(() => {
    dispatch(userActions.getUserExended({userId}));
  }, []);
  

  /**
   * Handle Click on X button in right corner
   */
  const handleBackNavigation = () => {
    navigation.goBack();
  };

  if (loading) {
    return <AnimatedLoader />;
  }
  return (
    <View style={{flex: 1}}>
      {/* Top header  */}
      <PersonInfo
        carAvatar={person.avatar}
        licencePlate={person.licencePlate}
      />
      {/* Top header  */}
     <View>
       <Text> USER Location { personLocation.locationName } </Text>
     </View>
    </View>
  );
};


export default PersonExtended;

人员位置：

export const UserLocation = ({navigation, route}) => {


  /** Get user ID From parameters **/
  const {userId} = route.params;

  /** Redux selectors **/
  const {personLocation = null, loading = true} = useSelector(state => state.location);


  const dispatch = useDispatch();





  /**
   * Mounted hook, loads vehicle info
   */
  useEffect(() => {
    dispatch(userActions.getUserLocation({userId}));
  }, []);
  

  /**
   * Handle Click on X button in right corner
   */
  const handleBackNavigation = () => {
    navigation.goBack();
  };

  if (loading) {
    return <AnimatedLoader />;
  }
  return (
    <View style={{flex: 1}}>
      {/* Top header  */}
      <PersonInfo
        carAvatar={person.avatar}
        licencePlate={person.licencePlate}
      />
      {/* Top header  */}
     <View>
       <Text> USER Location { personLocation.locationName } </Text>
     </View>
    </View>
  );
};


export default UserLocation;

标签： reactjsreact-nativereact-native-navigation

解决方案

您可以使用 redux 状态在其他两个屏幕中访问存储的用户信息，例如头像等，就像您在第一个屏幕上显示它一样。

例如。

人员扩展：

const {person} = useSelector(state => state.vehicles);

人员位置：

const {person} = useSelector(state => state.vehicles);

--------或--------

创建一个文件并导出默认类，如下所示：

导出默认类 Person { static imageData = ''; // 在这里存储图片 base64 数据.. }

现在只需在您要获取用户数据的屏幕中导入类，并将 base64 图像数据分配给 imageData 静态变量。

喜欢：

import Person from './Person';
Person.imageData = 'image/base64&...'

用法

import Person from './Person';
<Image source={{uri: Person.imageData }} />

推荐阅读