RN开发常见问题

前端技术发表留言

1、Text文本超出使用省略号

numberOfLines为1，1行超出就省略了，设置2，就是超出2行就会省略；

<Text style={styles.raceTitle} numberOfLines={1}>
    {data.match_name}
</Text>

2、Text同一行文本显示不同的样式

使用嵌套的文本会继承样式；例如一行有一部分是高亮；单个文本标签就会换行例如下面的，我们的要求是1和2显示一行除了2字体颜色不同，其他样式和1一样；

const nodes = (
    <View>
        <Text style={{fontSize: 12, fontWeight: '500'}}>1</Text>
        <Text style={{color: 'red', fontSize: 12, fontWeight: '500'}}>2</Text>
    </View>
)

上面的文本样式有一部分重复，并且要显示在一行的时候完全可以使用Text包裹一下；

const nodes = (
    <Text style={{fontSize: 12, fontWeight: '500'}}>
        <Text>1</Text>
        <Text style={{color: 'red'}}>2</Text>
    </Text>
)

3、ERROR: f2d_register_rpc() => (null) (-22)

需要安装：watchman，查看issue详情。

4、ScrollView隐藏滚动条

可以隐藏水平和垂直的，组件本身都有配置，有滚动条显得不太美观，所以可按需隐藏。

<ScrollView
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    style={{ flex: 1 }}
>
</ScrollView>

5、没有 position: fixed

有些需要吸底的元素，需要借助flex:1实现按钮吸底；

6、获取手机的宽高

// 使用Dimensions获取手机的宽高
import { Dimensions } from "react-native";
const {height, width} = Dimensions.get('window');

7、检测App是否切换到后台或者隐藏了

AppState能告诉你应用当前是在前台还是在后台，并且能在状态变化的时候通知你。
AppState 通常在处理推送通知的时候用来决定内容和对应的行为。App Statesactive – 应用正在前台运行
background – 应用正在后台运行。用户可能面对以下几种情况：

  • 在别的应用中
  • 停留在桌面

对 Android 来说还可能处在另一个Activity中（即便是由你的应用拉起的）
[iOS] inactive – 此状态表示应用正在前后台的切换过程中，或是处在系统的多任务视图，又或是处在来电状态中。

要获取当前的状态，你可以使用 AppState.currentState​，这个变量会一直保持更新。不过在启动的过程中，currentState可能为 null，直到AppState从原生代码得到通知为止。

8、tab-veiew使用相关问题

插件名称：react-native-tab-view

1）需要给容器设置 flex: 1 否则tabview 不会显示的；

2）安卓手机隐藏TabView的阴影样式，参考：View Style Props · React Native

tabBar: {
    elevation: 0,
    shadowColor: '#fff',
    shadowOpacity: 0,
    backgroundColor: '#fff',
},

<TabBar style={styles.tabBar} .../>

9、RN 不支持的时间格式

开发时发现RN不支持 2020-12-12 这样的时间，需要替换下“-”为“/”，即2020/12/12才能识别，猜测和safari相似；

const time = new Date(dataStr.replace(/-/g, '/'));

10、轮播图插件在安卓上loop的问题

插件名称：react-native-snap-carousel
缺陷描述：#737
尝试添加enableSnap=false，会导致到第一个时候，无法往前滑动，最后一个无法手动滑到下一个，只有安卓手机上有问题，暂时没有解决方案。

11、RN打包报错

error node_modules/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js: Unexpected token punc «:», expected punc «{» in file node_modules/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js at 94:29. Run CLI with --verbose flag for more details.

升级下面包的版本号

"metro-react-native-babel-preset": "^0.61.0"

但是group_card_page升级后会打包失败，暂时没有找到问题所在，所以在打包group_card_page的时候再降级回去重新打包

12、安卓端长图背景的问题

RN安卓端，长图背景会模糊，所以要切图，切成每个短的图片拼接上去就可以了，每张短图的高度要小于屏幕的高度（预测是预加载图片导致的）；

13、运行遇到Unexpected identifier _classCallCheck

// 1. 更新package.json中的依赖，metro-react-native-babel-preset版本从0.58.0=>0.59.0
// 锁死 @babel/traverse 版本 为 7.16.7
{
    "@babel/core": "^7.6.4",
    "@babel/runtime": "^7.6.3",
    "metro-react-native-babel-preset": "^0.59.0",
    "overrides": {  
      "@babel/traverse": "7.16.7"  
    },  
    "resolutions": {  
      "@babel/traverse": "7.16.7"  
    },
}
// 2. 更新babel.config.js，添加unstable_disableES6Transforms配置项目
module.exports = {
     presets: [  
      [  
        'module:metro-react-native-babel-preset',  
        { unstable_disableES6Transforms: true },  
      ],  
    ],
};
// 3. metro.config.js 设置重置缓存启动
module.exports = {
  resetCache: true,
};

留下回复