1. 程式人生 > >React Native Android 開發中遇到的坑

React Native Android 開發中遇到的坑

react native 更新非常活躍,下面的總結可能在後續會被完善修改好,根據react native 版本情況採用下面的方法,
我在使用的時間是 2015年12月10日。

網路請求方式,我使用官網的示例程式碼並沒用成功,簡單修改後才能使用 示例如下:

fetch(reqUrl, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body
: JSON.stringify(post_data) }).then((response) => response.json()) .then((responseText) => { console.log(responseText); this.setState({ isLoading: false, response: responseText, }); })
.catch((error) => { this.setState({ isLoading: false, response: null, }); });

不同於修改JS程式碼能直接生效,每一次在Android 專案新增圖片或者修改 Android原生專案的資源的時候,要重新執行 react-native run-android ,生成資原始檔。

圖片大小的控制 需要靠 drawable-hdpi 還是 xhdpi、xxhdpi 等資源目錄名字控制,例如相同的圖片放在hdpi會放大一些,xhdpi精度會高一些。

React Components 元件間傳參
在MianPage頁面程式碼如下

onSelectMenu: function () {
    this.goToSetting();
    this.refs[DRAWER_REF].closeDrawer();
},

<MenuList
    onSelectMenu={this.onSelectMenu}
    />

在 MenuListPage 使用傳遞過來的引數如下,需要注意的是 onSelectMenu 這個方法名字要一致

<TouchableHighlight
    style={styles.touchable}
    underlayColor="#B3E5FC"
    onPress={this.props.onSelectMenu}>
    <Text style={styles.text}>
        設定
    </Text>
</TouchableHighlight>

通過學習下面的官方文件瞭解如何傳參:
React 元件通過一個render()方法,接受輸入的引數並返回展示的物件。
以下這個例子使用了 JSX,它類似於XML的語法

輸入的引數通過render()傳入元件後,將儲存在this.props

JSX 是可選的,並不強制要求使用。

點選 “Compiled JS” 可以看到 JSX 編譯之後的 JavaScript 程式碼
Live JSX Editor

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode)

輸出結果:Hello John

自定義native 控制元件 在int等值傳參時候的定義辦法 以及報錯的時候排錯思路,要開啟Android logcat 工具 看Android端的報錯才能分析出來,
如果要求引數是int,使用的時候因為js的傳參是String 例如
要用這種方式呼叫 :textSize= {20} 如果用 textSize= “20”,這種方式會報錯

@ReactProp(name = "textSize", defaultFloat = 12f)
    public void setTextSize(TextView view, float texs) {
        view.setTextSize(textSize);
    }