如何在React中从屏幕上获取数据？

Question

我有一个订阅屏幕，它有一个useEffect钩子来更新isSubbscribed useState。

我正在ApprRoot中实现这个屏幕，作为订阅付费墙。我只需要得到这个useState变量isSubscribed，并在appRoot中使用它来查看数据。如何从订阅屏幕获取这些数据？

例如，在我的AppRoot.jsx中：

const subbed =  *subScreen use State Variable* 
return (

{ subbed ? (
                        <Stack.Navigator>  
                            <Stack.Group>
                                <Stack.Screen
                                    name="SubScreen"
                                    component={SubScreen}
                                    initialParams={{ initialroute: 'Home' }}
                                />
                                </Stack.Group>
                            </Stack.Navigator>  
                        ) : (
                        <NavigationRoot /> 
                        )}
)

Subscreen.jsx有一个如下所示的变量

  const [subbed, setSubbed] = useState([]);

我如何能够在许可文件中使用这个useState？我就不能直接出口吗？

我希望能够获得useState变量，并使用它生成适当的屏幕。

下面是完整的subScreen，其中ownedSubscriptions和Setowned正在从appRoot中传递。如果没有订阅，我需要在启动时显示subScreen，但也可以在启动时访问，也可以不显示ownedSubscriptions是否为true。

const SubScreen = ({ownedSubscriptions,setOwnedSubscriptions}) => {

  const {
    connected,
    subscriptions,
    getSubscriptions,
    currentPurchase,
    finishTransaction,
  } = useIAP();


  console.log('connected: ',connected);

  //[ownedSubscriptions, setOwnedSubscriptions] = set useState(

  const handleGetSubscriptions = () => {
        getSubscriptions({skus: ['sku']}).then( ()=>{
          console.log('Got Subscriptions')
        }).catch( () => {
          console.log('failed to get subscriptions')
        })
      }


  const handleBuySubscription = async (
      productId,
      offerToken,
    ) => {
      if (isPlay && !offerToken) {
        console.warn(
          `There are no subscription Offers for selected product (Only requiered for Google Play purchases): ${productId}`,
        );
      }
      try {
        await requestSubscription({
          sku: productId,
          ...(offerToken && {
            subscriptionOffers: [{sku: productId, offerToken}],
          }),
        });
      } catch (error) {
        if (error instanceof PurchaseError) {
          errorLog({message: `[${error.code}]: ${error.message}`, error});
        } else {
          errorLog({message: 'handleBuySubscription', error});
        }
      }
    };
  
    useEffect(() => {      
      const checkCurrentPurchase = async () => {
        try {
          if (currentPurchase?.productId) {
            await finishTransaction({
              purchase: currentPurchase,
              isConsumable: true,
            });
  
            setOwnedSubscriptions((prev) => [
              ...prev,
              currentPurchase?.productId,
            ]);
          }
        } catch (error) {
          if (error instanceof PurchaseError) {
            errorLog({message: `[${error.code}]: ${error.message}`, error});
          } else {
            errorLog({message: 'handleBuyProduct', error});
          }
        }
      };
  
      checkCurrentPurchase();
    }, [currentPurchase, finishTransaction]);


    console.log(ownedSubscriptions + ' owned') //returns lxm_1999_1m_1w0

    return (
      <ScrollView contentContainerStyle={contentContainerStyle}>
        <State connected={connected} storekit2={isIosStorekit2()} />
  
        <Box>
          <View style={styles.container}>
            <Heading copy="Subscriptions" />
  
            {subscriptions.map((subscription, index) => {
              const owned = ownedSubscriptions.find((pId) => {
                return isAmazon
                  ? pId === constants.amazonBaseSku
                  : pId === subscription.productId;
              });
              return (
                <Row
                  key={subscription.productId}
                  fields={[
                    {
                      label: 'Subscription Id',
                      value: subscription.productId,
                    },
                    {
                      label: 'type',
                      value:
                        'type' in subscription
                          ? subscription.type
                          : subscription.productType,
                    },
                  ]}
                  isLast={subscriptions.length - 1 === index}
                >
                  {owned && <Text>Subscribed</Text>}
                  {!owned &&
                    isPlay &&
                    // On Google Play Billing V5 you might have  multiple offers for a single sku
                    'subscriptionOfferDetails' in subscription &&
                    subscription?.subscriptionOfferDetails?.map((offer) => (
                      <Button
                        title={`Subscribe ${offer.pricingPhases.pricingPhaseList
                          .map((ppl) => ppl.billingPeriod)
                          .join(',')}`}
                        onPress={() => {
                          handleBuySubscription(
                            subscription.productId,
                            offer.offerToken,
                          );
                        }}
                      />
                    ))}
                  {!owned && (isIos || isAmazon) && (
                    <Button
                      title="Subscribe"
                      onPress={() => {
                        handleBuySubscription(subscription.productId);
                      }}
                    />
                  )}
                </Row>
              );
            })}
          </View>
  
          <Button
            title="Get the subscriptions"
            onPress={handleGetSubscriptions}
          />
        </Box>
      </ScrollView>
    );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
  },
});

export default SubScreen;

Answer 1

我认为最简单的方法是在父组件(所以apRoot)中定义状态变量，并将其作为道具传递到屏幕，以及setSubbed (so 2道具)。

所以你的AppRoot.jsx应该是：

const [subbed, setSubbed] = useState([]);
return (

{ subbed ? (
                        <Stack.Navigator>  
                            <Stack.Group>
                                <Stack.Screen
                                    name="SubScreen"
                                    initialParams={{ initialroute: 'Home' }}>
                                    {props => <SubScreen {...props} subbed={subbed} setSubbed={setSubbed} />}
                                </Stack.Screen>
                                </Stack.Group>
                            </Stack.Navigator>  
                        ) : (
                        <NavigationRoot /> 
                        )}
)

现在您可以从您的子组件(使用setSubbed)更新它，并从您的父组件使用它。

您的子组件应该是这样的：

function SubScreen({subbed, setSubbed}) {}
// or
const SubScreen = ({subbed, setSubbed}) => {}

如果您需要来自其他几个组件，甚至嵌套组件，您可能需要查看上下文。