react-native - 授予 Apple Health Kit 许可后转到下一页

Question

我正在我的 React Native 项目中实现 Apple HealthKit，我能够调用它并显示权限页面，但是当我允许它时，我会回到同一页面，当我授予它导航的权限时我该如何做到这一点到下一个屏幕？

这是我的代码

请求许可的页面

import React, { useRef, useEffect } from 'react';
import {
  View,
  FlatList,
  Text,
  Image,
  TouchableOpacity,
  Dimensions,
  SafeAreaView,
} from 'react-native';
import ProgressCircle from 'react-native-progress-circle';
import Icon from 'react-native-vector-icons/AntDesign';
import styles from './styles';
import AppleHealthKit, {
  HealthValue,
  HealthKitPermissions,
} from 'react-native-health';
import AppleHKit from '../onboarding/applehealthkit';
import appleHealthKit from 'react-native-health';

const onboardingScreensData = [
  {
    title: 'NOT CONNECTED',
    imagePath: require('../../assets/images/applehealthbkgoff.png'),
  },
  {
    title: 'NOT CONNECTED',
    imagePath: require('../../assets/images/applehealthbkgon.png'),
  },
  {
    title: 'CONNECTED',
    imagePath: require('../../assets/images/applehealthbkgon.png'),
  },
];

const AppleHealth = ({ navigation }) => {
  const screenWidth = Dimensions.get('screen').width;

  const onboardingFlastListRef = useRef(null);
  const renderItem = ({ item, index }) => (
    <Item title={item.title} imagePath={item.imagePath} index={index} />
  );

  useEffect(() => {});

  const Item = ({ title, imagePath, index }) => (
    <View style={styles.container}>
      <SafeAreaView style={{ flex: 1, flexDirection: 'column' }}>
        <View
          style={{ flex: 0.25, justifyContent: 'flex-end', paddingTop: 20 }}>
          <Image
            source={require('../../assets/images/applehealthlogo.png')}
            style={{
              alignSelf: 'center',
            }}
            resizeMode={'contain'}
          />
          <Text
            style={{
              textAlign: 'center',
              paddingHorizontal: 20,
              fontSize: 30,
              fontWeight: 'bold',
            }}>
            Apple Health
          </Text>
        </View>
        {index == 2 ? (
          <View
            style={{
              alignItems: 'center',
              justifyContent: 'flex-start',
              flex: 0.13,
            }}>
            <Text style={{ fontSize: 12, margin: 10, color: 'green' }}>
              {title}
            </Text>
          </View>
        ) : (
          <View
            style={{
              alignItems: 'center',
              justifyContent: 'flex-start',
              flex: 0.13,
            }}>
            <Text style={{ fontSize: 12, margin: 10, color: 'red' }}>
              {title}
            </Text>
          </View>
        )}

        <View
          style={{
            justifyContent: 'flex-end',
            alignItems: 'center',
            flex: 0.6,
          }}>
          <Text style={{ fontSize: 25 }}>How to connect</Text>
          <Text
            style={{
              textAlign: 'center',
              marginHorizontal: 20,
              marginTop: 15,
              marginBottom: 20,
              fontSize: 17,
            }}>
            Select Empatho is Apple Health Sources and tap Turn All Categories
            On
          </Text>
          {index == 2 ? (
            <View>
              <TouchableOpacity
                style={{
                  justifyContent: 'center',
                  backgroundColor: '#533AED',
                  height: 50,
                  borderRadius: 50,
                  alignItems: 'center',
                  width: '80%',
                  paddingHorizontal: 10,
                }}
                onPress={() => navigation.navigate('SurveyHR')}>
                <View
                  style={{
                    paddingVertical: 10,
                    paddingHorizontal: 10,
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}>
                  <Text
                    style={{
                      fontSize: 16,
                      color: '#FFF',
                      alignItems: 'center',
                      letterSpacing: 1,
                    }}>
                    PROCEED WITHOUT{' '}
                  </Text>
                  <Image
                    source={require('../../assets/images/miniapple.png')}
                  />
                  <Text
                    style={{
                      fontSize: 16,
                      color: '#FFF',
                      alignItems: 'center',
                      letterSpacing: 1,
                    }}>
                    {' '}
                    WATCH
                  </Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
                <Text
                  style={{
                    color: '#533AED',
                    textAlign: 'center',
                    marginTop: 10,
                  }}>
                  I HAVE APPLE WATCH
                </Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={{ width: screenWidth, alignItems: 'center' }}>
              <TouchableOpacity
                style={{
                  justifyContent: 'center',
                  backgroundColor: '#533AED',
                  height: 50,
                  borderRadius: 50,
                  alignItems: 'center',
                  width: '80%',
                }}
                onPress={
                  () => AppleHKit()
                  // onboardingFlastListRef.current.scrollToIndex({
                  //   animated: true,
                  //   index: index + 1,
                  // })
                }>
                <View
                  style={{
                    paddingVertical: 10,
                    paddingHorizontal: 10,
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}>
                  <Text
                    style={{
                      fontSize: 16,
                      color: '#FFF',
                      alignItems: 'center',
                      paddingRight: 30,
                      paddingLeft: 40,
                    }}>
                    CONNECT
                  </Text>
                </View>
              </TouchableOpacity>
              <Text
                style={{
                  color: '#533AED',
                  textAlign: 'center',
                  marginTop: 10,
                }}></Text>
            </View>
          )}
        </View>
      </SafeAreaView>
      <Image
        source={imagePath}
        resizeMode="cover"
        style={[
          styles.backgroundImage,
          { position: 'absolute', bottom: 30, zIndex: -1 },
        ]}></Image>
    </View>
  );
  
  return (
    <View style={styles.container}>
      <FlatList
        ref={onboardingFlastListRef}
        data={onboardingScreensData}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        horizontal={true}
        decelerationRate={'fast'}
        snapToInterval={screenWidth}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
};

export default AppleHealth;

编辑 HealthKit 权限的类

import AppleHealthKit, {
  HealthValue,
  HealthKitPermissions,
} from 'react-native-health';

const HealthKit = () => {
  /* Permission options */
  const permissions = {
    permissions: {
      read: [AppleHealthKit.Constants.Permissions.HeartRate],
      write: [AppleHealthKit.Constants.Permissions.Steps],
    },
  };

  AppleHealthKit.initHealthKit(permissions, (error) => {
    /* Called after we receive a response from the system */

    if (error) {
      console.log('[ERROR] Cannot grant permissions!');
    }

    /* Can now read or write to HealthKit */

    const options = {
      startDate: new Date(2020, 1, 1).toISOString(),
    };

    AppleHealthKit.getHeartRateSamples(options, (callbackError, results) => {
      /* Samples are now collected from HealthKit */
    });
  });
};

export default HealthKit;

任何人都可以在这里给我一盏灯吗？

标签： react-nativereact-native-navigationhealthkit