0

我正在尝试使我的应用程序的设计适应平板电脑，检测应用程序是否在平板电脑上运行的一种方法是使用 DeviceInfo 模块，特别是 isTablet() 方法。如何使用此方法有条件地将样式应用于元素？

这是我目前正在尝试做的事情：

import { checkIfDeviceIsTablet } from './helper-functions';

<View style={[styles.wrapper, checkIfDeviceIsTablet() === true ? styles.wrapperTablet : {}]}>
    {contents}
</View>

checkIfDeviceIsTablet() 函数如下：

import DeviceInfo from 'react-native-device-info';

function checkIfDeviceIsTablet() {

    DeviceInfo.isTablet().then(isTablet => {
        return isTablet;
    });

}

问题是当组件加载时 checkIfDeviceIsTablet() 方法返回一个承诺而不是预期的真/假值，因此当应用程序在平板电脑上运行时条件样式不会应用。我尝试使用 try/catch 将函数转换为 async/await 格式，但结果是一样的。

我会使用 React Native 自己的 Platform.isPad 函数，但该应用程序也必须在 Android 上运行。

任何帮助表示赞赏。

4

2 回答 2

1

我建议DeviceInfo.isTablet()在您的应用程序开始时只调用一次。您可以全局存储结果，然后您可以检查类型而无需处理异步承诺。

要全局存储类型，您的选择是：

  • 全局变量
  • React 的上下文 API
  • 类的静态属性（如果使用 ES6+）
  • 某种全局状态管理解决方案，例如 Redux

你仍然需要处理最初的异步问题，因为第一次调用DeviceInfo.isTablet()将返回一个异步承诺。

我建议查看 React 的 Context API。

这是一个粗略的例子：

render() {
   return (
      <DeviceInfoContext.Consumer>
      { ({ isTablet }) => (
         <Text>Is this a tablet? {isTablet}</Text>
      ) }
      </DeviceInfoContext.Consumer>
   )
}

你的DeviceInfoContext班级看起来像这样：

class DeviceInfoContext extends React.Component {
   state = {
      isTablet: false
   }

   componentDidMount() {
      Device.IsTablet().then(result => this.setState({ isTablet: result }))
   }

   render() {
      return (
         this.props.children({ isTablet: this.state.isTablet })
      )
   }
}

这只是一个粗略的例子。您可以在文档中了解有关 Context API的更多信息

于 2019-09-25T17:10:36.397 回答
0

我也对 react native 0.5xx 到 0.6xx 的破坏性更改遇到了一些麻烦。设备检测库将其结构更改为 Promise。一幅画。

这个库节省了一天，安装和使用非常容易。 https://github.com/m0ngr31/react-native-device-detection

import { isTablet } from 'react-native-device-detection;

// isTablet is a boolean. Return false o true immediately

//So ...

import styled from 'styled-components/native';
import theme from 'styled-theming';  
import { isTablet } from 'react-native-device-detection';

const CoverPageDateText = styled.Text`
font-size: ${isTablet ? 23 : 17};
color: gray; 
padding-bottom: 9;
`
于 2019-10-01T17:49:12.527 回答