反应本机台湾宾果28开奖

什么是反应本机台湾宾果28开奖? 

社区台湾宾果28开奖解决方案是独立的库,开发人员可以通过几行代码来设置应用程序的屏幕。 反应台湾宾果28开奖提供了一种简单的台湾宾果28开奖解决方案,能够在iOS和Android上呈现常见的堆栈台湾宾果28开奖和选项卡式台湾宾果28开奖模式。 

安装与设定

我们首先需要使用以下代码在我们的项目中安装react台湾宾果28开奖:

npm 安装 @ 反应-navigation / native @ 反应-navigation / stack

下一步将使用expo安装依赖项: 

世博会 安装 反应性的-reanimated 反应本机手势处理程序 反应性的-screens 反应性的安全区域上下文@ 反应性的-community / masked-view

如果您有一个裸露的React Native项目,请使用npm安装依赖项:

npm 安装 反应性的-reanimated 反应本机手势处理程序 反应性的-screens 反应性的安全区域上下文@ 反应性的-community / masked-view

 

使用iOS时,必须确保已安装Cocoapods,此后将安装Pod以完成安装。 

光盘 ios

安装

光盘 ..

 

要完成反应本机手势处理程序的安装,请在条目文件(例如index.js或app.js)顶部添加以下内容

进口 ‘反应本机手势处理程序’;

 安装的最后一步是将所有内容包装在NavigationContainer中。 

进口 ‘反应本机手势处理程序’;

进口 * 反应 ‘react’;

进口 { NavigationContainer } ‘@ 反应-navigation / native’;

 

const 应用程式 = () => {

  返回 (

    <NavigationContainer>

      {/ *您的其余应用代码* /}

    </NavigationContainer>

  );

};

 

出口 默认 应用程式;

 

现在,我们准备构建和运行我们的应用程序。

 

 

使用React台湾宾果28开奖的堆栈台湾宾果28开奖

堆栈台湾宾果28开奖是react提供的台湾宾果28开奖技术之一。我们将从src / 应用程式.js文件中的基本App组件开始,而无需太多样式。 

输入以下代码:

进口 反应 ‘react’;

进口 { 样式表, 文本, 视图 } ‘react-native’;

const 样式 = 样式表.创造({

  container: {

柔性: 1,

alignItems: ‘center’,

证明内容: ‘center’,

  },

});

const 应用程式 = () => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>你好React Native!</文本>

</视图>

  );

};

出口 默认 应用程式;

 

之后,我们需要实现两个屏幕(或页面),然后将允许我们最终从一个屏幕台湾宾果28开奖到另一个屏幕。我们在其专用文件夹中创建两个屏幕组件。 

 

首先,src / screens / 降落 / index.js:

进口 反应 ‘react’;

进口 { 视图, 文本, 样式表 } ‘react-native’;

const 样式 = 样式表.创造({

  container: {

柔性: 1,

alignItems: ‘center’,

证明内容: ‘center’,

  },

});

const 登陆屏 = () => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>公众登陆屏</文本>

</视图>

  );

};

出口 默认 登陆屏;

其次,src / screens / 首页 / index.js:

进口 反应 ‘react’;

进口 { 视图, 文本, 样式表 } ‘react-native’;

const 样式 = 样式表.创造({

  container: {

柔性: 1,

alignItems: ‘center’,

证明内容: ‘center’,

  },

});

const 主屏幕 = () => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>受保护的主屏幕</文本>

</视图>

  );

};

出口 默认 主屏幕;

 

您可以看到两个屏幕目前都是公开的。 

 

在实现这两个组件的情况下,我们希望在App组件中使用它们,但为此,我们需要使用给定的代码为Stack Navigation安装依赖项: 

博览会安装@ 反应-navigation / stack

 

之后,我们将使用两个屏幕组件在src / 应用程式.js组件中创建堆栈台湾宾果28开奖:

进口 反应 ‘react’;

进口 { NavigationContainer } ‘@ 反应-navigation / native’;

进口 { 创造StackNavigator } ‘@ 反应-navigation / stack’;

 

进口 登陆屏 ‘./screens/Landing’;

进口 主屏幕 ‘./screens/Home’;

 

const 根堆栈 = 创造StackNavigator();

 

const 应用程式 = () => {

  返回 (

    <NavigationContainer>

      <根堆栈.Navigator>

        <根堆栈 名称=”降落 零件= {登陆屏} />

        <根堆栈 名称=”首页 零件= {主屏幕} />

      </根堆栈.Navigator>

    </NavigationContainer>

  );

};

 

出口 默认 应用程式;

 

所有台湾宾果28开奖组件都必须将NavigationContainer用作包装组件。由于它是台湾宾果28开奖层次结构的第一级,因此也称为RootStack。 

 

使用React Navigation-进行台湾宾果28开奖 

现在我们有两个页面,但是无法从一个页面台湾宾果28开奖到另一页面。现在,我们将学习如何操作。 

通过使用按钮组件,我们可以通过按下按钮来执行反应台湾宾果28开奖:

进口 反应 ‘react’;

进口 { 视图, 文本, 纽扣, 样式表 } ‘react-native’;

const 登陆屏 = ({台湾宾果28开奖 }) => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>公众登陆屏</文本>

   <纽扣

     标题=”回家

     onPress= {() => 台湾宾果28开奖.台湾宾果28开奖(‘Home’)}

   />

</视图>

  );

};

出口 默认 登陆屏;

 

再次检查您的应用。您应该能够从最初呈现的登录屏幕转到主屏幕。堆栈台湾宾果28开奖的一个好处是主屏幕上的后退按钮,它使您可以从主屏幕返回到着陆屏幕,而无需在主屏幕上进行进一步的实现。让我们在应用程序上介绍另一个屏幕:

 

 

除了台湾宾果28开奖至主屏幕外,我们还将台湾宾果28开奖至屏幕上的登录。

进口 反应 ‘react’;

进口 { 视图, 文本, 纽扣, 样式表 } ‘react-native’;

const 登陆屏 = ({台湾宾果28开奖 }) => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>公众登陆屏</文本>

   <纽扣

     标题=”前往登入

     onPress= {() => 台湾宾果28开奖.台湾宾果28开奖(‘Sign In’)}

   />

</视图>

  );

};

出口 默认 登陆屏;

 

用于登录屏幕的组件的位置是,

新的src / screens / SignIn / index.js文件:

进口 反应 ‘react’;

进口 { 视图, 文本, 样式表 } ‘react-native’;

const 样式 = 样式表.创造({

  container: {

柔性: 1,

alignItems: ‘center’,

证明内容: ‘center’,

  },

});

const 登录屏幕 = () => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>公开登录屏幕</文本>

</视图>

  );

};

出口 默认 登录屏幕;

 

在新页面按预期工作之前,您必须将其用作我们应用程序组件中“堆栈台湾宾果28开奖”中的新屏幕: 

 

进口 反应 ‘react’;

进口 { NavigationContainer } ‘@ 反应-navigation / native’;

进口 { 创造StackNavigator } ‘@ 反应-navigation / stack’;

进口 登陆屏 ‘./screens/Landing’;

进口 登录屏幕 ‘./screens/SignIn’;

进口 主屏幕 ‘./screens/Home’;

const 根堆栈 = 创造StackNavigator();

const 应用程式 = () => {

  返回 (

<NavigationContainer>

   <根堆栈.Navigator>

     <根堆栈 名称=”降落 零件= {登陆屏} />

     <根堆栈 名称=”登入 零件= {登录屏幕} />

     <根堆栈 名称=”首页 零件= {主屏幕} />

   </根堆栈.Navigator>

</NavigationContainer>

  );

};

出口 默认 应用程式;

 

现在,我们有三个页面,尽管两个页面应该是公开的,但主屏幕页面应该设置为受保护的。这意味着它只能由经过身份验证的用户访问。因此,没有从登录屏幕到主屏幕的直接台湾宾果28开奖。 

 

为了弥合这一差距,我们将必须实现伪登录机制。 

进口 反应 ‘react’;

进口 { 视图, 文本, 纽扣, 样式表 } ‘react-native’;

const 登录屏幕 = ({ onSignIn }) => {

  返回 (

<视图 风格= {样式.容器}>

   <文本>公开登录屏幕</文本>

   <纽扣 标题=”登入 onPress= {onSignIn} />

</视图>

  );

};

出口 默认 登录屏幕;

 

 

 

 

 

要将新处理程序传递到SignIn屏幕,请调整如何将组件传递到STackNavigation:

const 应用程式 = () => {

  const [isAuthenticated, setIsAuthenticated] = 反应.useState();

  const handleSignIn = () => {

// TODO实现真正的登录机制

    setIsAuthenticated(真正);

  };

  返回 (

<NavigationContainer>

   <根堆栈.Navigator>

     <根堆栈 名称=”降落 零件= {登陆屏} />

     <根堆栈 名称=”登入“>

       {(道具) => (

         <登录屏幕 {…道具} onSignIn= {handleSignIn} />

       )}

     </根堆栈>

     <根堆栈 名称=”首页 零件= {主屏幕} />

   </根堆栈.Navigator>

</NavigationContainer>

  );

};

 

现在,我们可以切换屏幕以登录。剩下的就是让用户访问受保护的区域,这可以通过实现以下代码来完成: 

const 应用程式 = () => {

  const [isAuthenticated, setIsAuthenticated] = 反应.useState();

  const handleSignIn = () => {

// TODO实现真正的登录机制

    setIsAuthenticated(真正);

  };

  返回 (

<NavigationContainer>

   <根堆栈.Navigator>

     {isAuthenticated ? (

       <根堆栈 名称=”首页 零件= {主屏幕} />

     ) : (

       <>

         <根堆栈

           名称=”降落

           零件= {登陆屏}

         />

         <根堆栈 名称=”登入“>

           {(道具) => (

             <登录屏幕 {…道具} onSignIn= {handleSignIn} />

           )}

         </根堆栈>

       </>

     )}

   </根堆栈.Navigator>

</NavigationContainer>

  );

};

 

我们还可以实现一个“退出”屏幕,并将“退出”选项放在屏幕的标题上。 

 

进口 反应 ‘react’;

进口 { 纽扣 } ‘react-native’;

const 应用程式 = () => {

  const [isAuthenticated, setIsAuthenticated] = 反应.useState();

  const handleSignIn = () => {

// TODO实现真正的登录机制

    setIsAuthenticated(真正);

  };

  const handleSignOut = () => {

// TODO实现真正的签出机制

    setIsAuthenticated();

  };

  返回 (

<NavigationContainer>

   <根堆栈.Navigator>

     {isAuthenticated ? (

       <根堆栈

         名称=”首页

         零件= {主屏幕}

         选项= {{

           headerRight: () => (

             <纽扣 onPress= {handleSignOut} 标题=”登出 />

           ),

         }}

       />

     ) : (

       <>

         <根堆栈

           名称=”降落

           零件= {登陆屏}

         />

         <根堆栈 名称=”登入“>

           {(道具) => (

             <登录屏幕 {…道具} onSignIn= {handleSignIn} />

           )}

         </根堆栈>

       </>

     )}

   </根堆栈.Navigator>

</NavigationContainer>

  );

};

 

现在也会出现一个退出按钮,您可以在此基本软件中从一个屏幕台湾宾果28开奖到另一个屏幕。