react-native for android学习

YanYanLun commented 8 years ago

[2016.04.14] ListView数据绑定 1、从react-native中导入ListView控件（import {ListView} from 'react-native';） 2、render中以标签形式呈现（ListView dataSource={this.state.dataSource} renderRow{this._row}/） 3、声明json数据（var data = ['row 1', 'row 2'];） 4、var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 5、 this.state = {dataSource: ds.cloneWithRows(data)} 6、在ListView标签中以this.state.dataSource绑定数据 7、_row(value) return ( View style={styles.container} Button style={styles.welcomeText} {value} /Button /View ); }，每一行的数据UI

8、在ListView标签中以this._row绑定每一行的UI，添加ListView

YanYanLun commented 8 years ago

2016.04.15 1、import {Glood} from './android-js/home.android' 2、在index.android中直接修改主页为Glood，AppRegistry.registerComponent('ReactNativeGlood', () => Glood);不在index.android中增加其他代码，方便直接切换主页 4、Navigator导入，import {Navigator} from 'react-native'; 5、render() { var renderScene = this.renderSceneAndroid; return ( < Navigator style={style.txtStyle} debugOverlay={false} initialRoute={{ title: 'Main', id: 'main' }} renderScene={renderScene} />); } renderScene={renderScene}指定要渲染的UI 6、编写渲染UI var _navigator; renderSceneAndroid(route, navigator) { _navigator = navigator; if (route.id === 'main') { return ( < View > < TouchableOpacity style={ style.button }> < Image style={style.image} source={require('../android/app/src/main/res/mipmap-xhdpi/actionbar_back.png') }></ Image> < Text style={style.text} >NetWork</ Text > </ TouchableOpacity > </ View >); } } Image标签对应的source加载本地文件为js文件的相对位置，

YanYanLun commented 8 years ago

2016.04.15 1、import React = require("react") import { AppRegistry, Component, StyleSheet, View, Text, ListView, Alert, ScrollView, TouchableOpacity, Image} from 'react-native'; var _navigator;

export class CommonView extends Component< {}, { dataSource?: any } > {

render() {
    return (
        < View>
            < View style = {styles.view}>
                < TouchableOpacity onPress={this._onBack.bind(this) }>
                    < Image  source={require('../img/list4.png') } style={{ width: 20, height: 20 }}  />
                </ TouchableOpacity>
                < Text style={{ fontSize: 18, color: '#484848' }}>SHOP</Text>
                < Image  source={require('../img/search.png') } style={{ width: 20, height: 20 }} />
            </ View>
        </ View>
    );
}
_onBack() {
    _navigator.pop();
}
_setPop(pop) {
    _navigator = pop;
}

} const styles = StyleSheet.create({ view: { backgroundColor: '#999999', height: 54, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingLeft: 20, paddingRight: 20, } }); 公用页面状态栏，以import {CommonView} from "./common.android";导出，公用于其他界面 2、其他界面使用CommonView中的_sepPop(value)方法传入Navigator，传入方式为CommonView.prototype._setPop(this.props.navigator); 在公用导航栏中实现页面返回 3、在Navigator类中实现方法renderScene(router, navigator) renderScene(router, navigator) { var component = null; _navigator = navigator; switch (router.name) { case "welcome": component = Glood; return case "chat": return }

其他页面直接使用点击事件onPress={this._handerClick.bind(this, value) _handerClick(value, navigator) { this.props.navigator.push({ name: 'chat' }); } 通过name值找到所要打开的页面注：Glood 和 ChatProject 为导入页面 import {NavigatorClass} from './navigator.android'; import {ChatProject} from "./chat.android";

YanYanLun commented 8 years ago

2016.04.18 有关React-Native布局，参考Css样式http://www.css88.com/book/css/properties/flex/flex.htm React-Native专栏http://blog.csdn.net/column/details/usereactnative.html?page=1 @qaqaqa

YanYanLun commented 8 years ago

2016.04.19 ReactNative与原生单向通信 1、定义模块“ToastModule ” /**

Created by Sparxo_Android on 2016/4/19. */ public class ToastModule extends ReactContextBaseJavaModule { private Context context; private static final String DURATION_SHORT_KEY = "SHORT"; private static final String DURATION_LONG_KEY = "LONG";

public ToastModule(ReactApplicationContext reactContext) { super(reactContext); this.context = reactContext; }

public ToastModule(ReactApplicationContext reactContext, Context context) { super(reactContext); this.context = context; }

/**
- 获取wifi地址
- @return */ @ReactMethod public void show(String message, int duration) { Toast.makeText(getReactApplicationContext(), message, duration).show(); }
@ReactMethod public String wifi() { String result = null; try { WifiManager wifi = (WifiManager) context .getSystemService(Context.WIFI_SERVICE);
```
  WifiInfo info = wifi.getConnectionInfo();
  result = info.getMacAddress();
} catch (Exception e) {
  result = null;
}
return result;
```
}

@Override public String getName() { return "ToastAndroid"; }

@Override public Map<String, Object> getConstants() { final Map<String, Object> constants = MapBuilder.newHashMap(); constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT); constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG); return constants; }

@Override public boolean canOverrideExistingModule() { return true; } }

注：如果getName()返回的名称与模块class名称不一样时，请设置canOverrideExistingModule为true

2、添加模块到NativeModule public class MyPackageManager implements ReactPackage { public Context mContext;

public MyPackageManager(Context context) {
    this.mContext = context;
}

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> list = new ArrayList<>();
    list.add(new ToastModule(reactContext, mContext));
    return list;
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
}

}

3、注册模块到MainActivity MainActivity继承于ReactActivity public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "ReactNativeGlood"; }

@Override
protected boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new MyPackageManager(this)
    );
}

}

4、在JS中导入模块import { NativeModules} from 'react-native'; 5、NativeModules.ToastAndroid.show("单向通信", NativeModules.ToastAndroid.SHORT);

具体请参考ReactNative官方文档，点击进入

YanYanLun commented 8 years ago

2016.04.20 CallBack回调函数 1/回掉Class类必须继承ReactContextBaseJavaModule 2/具体设置参考-2016.04.19ReactNative与原生单向通信 3/回调方法 @ReactMethod public void gotoIM(Callback callback) { callback.invoke("我是毁掉"); } 4/JS实现回调方法 _gotoIM() { // 跳转到 IM 模块 NativeModules.ToastAndroid.gotoIM(function (result) { Alert.alert(result); }); } 注：result为原生代码返回的结果

YanYanLun commented 8 years ago

2016.04.21 Socket服务端 1/public class SocketListener extends Thread { private Context _context;

public SocketListener(Context context) {
    this._context = context;
}

@Override
public void run() {
    Looper.prepare();
    try {
        ServerSocket serverSocket = new ServerSocket(6666);
        while (true) {
            Socket socket = serverSocket.accept();
            Toast.makeText(_context, "有机器链接过来", Toast.LENGTH_SHORT).show();
            ChatSocket cs = new ChatSocket(socket);
            cs.start();
            ChatManager.getChatManager().add(cs);
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
    Looper.loop();
}

} 实例化Socket监听服务

2/public class ChatSocket extends Thread { Socket socket;

public ChatSocket(Socket s) {
    this.socket = s;
}

public void out(String out) {
    try {
        socket.getOutputStream().write((out + "\n").getBytes("UTF-8"));
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

@Override
public void run() {
    out("已成功连接到端口12345");
    try {
        BufferedReader br = new BufferedReader(new InputStreamReader(
                socket.getInputStream(), "UTF-8"));
        String line = null;
        while ((line = br.readLine()) != null) {
            System.out.println(line);
            ChatManager.getChatManager().publish(this, line);
        }
        br.close();
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }

}

} 新开线程，处理Socket服务接收到的消息 3/public class ChatManager { private ChatManager() { }

private static final ChatManager cm = new ChatManager();

public static ChatManager getChatManager() {

    return cm;
}

Vector<ChatSocket> vector = new Vector<ChatSocket>();

public void add(ChatSocket cs) {
    vector.add(cs);
}

public void publish(ChatSocket cs, String out) {
    for (int i = 0; i < vector.size(); i++) {
        ChatSocket csChatSocket = vector.get(i);
        if (!cs.equals(csChatSocket)) {
            csChatSocket.out(out);
        }
    }
}

} 处理接收到的消息

YanYanLun commented 8 years ago

2016.04.28 Socket IO http://www.gowhich.com/blog/608 @qaqaqa http://socket.io/blog/native-socket-io-and-android/

YanYanLun commented 8 years ago

2016.05.05 https://github.com/jondot/awesome-react-native 各种组件标签运用实例

SparxoOpenSource / Glood-ReactNative

react-native for android学习 #7