经过新的一周的学习和使用,又解决了几个新坑。

Android 5.0以下真机调试红屏问题

手机电脑处于同一网段下(电脑使用网线,手机wifi亦可)
打开开发者菜单(摇晃设备或运行adb shell input keyevent 82
Dev Settings -> Debug server host for device -> 输入电脑IP:8081(例如:10.10.1.1:8081)
react-native run-android


如果上面的方法没有效果,需要检查电脑防火墙是否屏蔽了NodeJS

import React 来源问题

Error Info:
import React from “react-native”;

分析:
React Native 0.45正式版更新
移除从 ‘react-native’ 中导入 React 的错误警告
从 ‘react-native’ 中导入 react 模块早在 0.25 的版本中被比标记为过期,现在如果再继续这样导入会直接报错。

无法安装(仅出现于MacOS或Linux)

Error Info:

Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected
and haveset up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

分析:

极大可能是ProjectRoot/android/gradlew没有可执行权限

1
2
3
cd android
(sudo) chmod +x gradlew //可能需要管理员权限
cd .. && react-native run-android

React-Native-Echart文字无法换行

在Echarts中formatter换行常用的是<br />\n

但是,在react-native-echarts中,使用以上转译符无效

同样试过\\n\\\n依然无效

终于两天前作者提出了方法,Issue

1
\\nn

自定义背景Header

react-navigation自带header一看就是iOS风格,而且不能直接设置背景图片

react-native里面设置背景图也比较奇葩,只能通过<Image><View/></Image>嵌套赋予内部View背景

需要自定义背景的Header就需要自己写组件了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const ImageHeader = (props) => (
<Image source={require("./images/header_bg.png")} style={{height: 50}}>
<View style={{flexDirection: "row", alignItems: "center"}}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Icon
name="keyboard-arrow-left"
size={48}
color="#fff"
/>
</TouchableOpacity>
<Text style={{color: 'white', fontSize: 18, marginBottom: 8}}>
{props.title}</Text>
</View>
</Image>
);
// 以上使用了Image设置背景图,react-native-vector-icons/MaterialIcons图标作返回按钮

const App = StackNavigator({
VH: {
screen: VH,
navigationOptions: {
header: props => <ImageHeader {...props} title="这是标题"/>,
}
},
)};