\u5b9e\u4f8b1\uff1a\u539f\u751f\u63a7\u4ef6\uff0c\u901a\u8fc7\u5c5e\u6027\u8c03\u7528\u539f\u751f\u63a7\u4ef6\u7684\u65b9\u6cd5\uff0c\u5b9e\u73b0\u8dd1\u9a6c\u706f\u6548\u679c<\/p>\n
\u5b9e\u4f8b2\uff1a\u7ec4\u5408\u63a7\u4ef6\uff0c\u901a\u8fc7\u5c5e\u6027\u8c03\u7528\u7ec4\u5408\u63a7\u4ef6\u7684\u65b9\u6cd5\uff0c\u5b9e\u73b0\u9009\u4e2d\u72b6\u6001\u6548\u679c<\/p>\n
\n\u6ce8\uff1aReact Native\u4e2d\u6ca1\u6709CheckBox\u7ec4\u4ef6<\/p>\n<\/blockquote>\n
<\/p>\n
FocusedTextViewManager.java<\/p>\n
public class FocusedTextViewManager extends SimpleViewManager<FocusedTextView> {\n\n private ThemedReactContext context;\n\n @Override\n public String getName() {\n return "FocusedTextView";\n }\n\n @Override\n protected FocusedTextView createViewInstance(ThemedReactContext reactContext) {\n context = reactContext;\n FocusedTextView focusedTextView = new FocusedTextView(context);\n focusedTextView.setText("\u6b22\u8fce\u89c2\u4e34 React Native APP \u5f00\u53d1\u793e\u533a\uff0c\u4e00\u4e2a\u9760\u8c31\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u5f00\u53d1\u6280\u672f\u4ea4\u6d41\u5e73\u53f0");\n focusedTextView.setTextColor(Color.BLUE);\n focusedTextView.setSingleLine(true);\n focusedTextView.setTextSize(20);\n focusedTextView.setEllipsize(TextUtils.TruncateAt.MARQUEE);\n return focusedTextView;\n }\n\n \/\/\u66b4\u9732\u5c5e\u6027\n @ReactProp(name = "text")\n public void setText(FocusedTextView view, String text){\n view.setText(text);\n }\n}<\/code><\/pre>\nSettingItemViewManager.java<\/p>\n
public class SettingItemViewManager extends SimpleViewManager<SettingItemView> {\n\n private ThemedReactContext context;\n\n @Override\n public String getName() {\n return "SettingItemView";\n }\n\n @Override\n protected SettingItemView createViewInstance(ThemedReactContext reactContext) {\n context = reactContext;\n SettingItemView itemView = new SettingItemView(context);\n itemView.setDesc("\u81ea\u52a8\u66f4\u65b0\u5df2\u7ecf\u5173\u95ed");\n itemView.setTitle("\u8bbe\u7f6e\u662f\u5426\u81ea\u52a8\u66f4\u65b0");\n return itemView;\n }\n\n @ReactProp(name = "desc")\n public void setDesc(SettingItemView view, String desc){\n view.setDesc(desc);\n }\n\n @ReactProp(name = "title")\n public void setTitle(SettingItemView view, String title){\n view.setTitle(title);\n }\n\n @ReactProp(name = "isChecked")\n public void setChecked(SettingItemView view, boolean isChecked){\n view.setChecked(isChecked);\n }\n}<\/code><\/pre>\nMyNativeModule.java<\/p>\n
public class MyNativeModule extends ReactContextBaseJavaModule implements ActivityEventListener, LifecycleEventListener {\n\n private ReactApplicationContext context;\n public static final int REQUEST_CODE = 1;\n\n public MyNativeModule(ReactApplicationContext reactContext) {\n super(reactContext);\n context = reactContext;\n }\n\n @Override\n public String getName() {\n \/\/\u4e00\u5b9a\u8981\u8fd4\u56de\u4e00\u4e2a\u540d\u5b57\uff0c\u5728RN\u4ee3\u7801\u91cc\u9762\u9700\u8981\u4f7f\u7528\u8fd9\u4e2a\u540d\u5b57\u6765\u8c03\u7528\u8be5\u7c7b\u7684\u65b9\u6cd5\n return "MyNativeModule";\n }\n\n \/\/\u51fd\u6570\u4e0d\u80fd\u6709\u8fd4\u56de\u503c\uff0c\u56e0\u4e3a\u88ab\u8c03\u7528\u7684\u539f\u751f\u4ee3\u7801\u662f\u5f02\u6b65\u7684\uff0c\u539f\u751f\u4ee3\u7801\u6267\u884c\u7ed3\u675f\u4e4b\u540e\u53ea\u80fd\u901a\u8fc7\u56de\u8c03\u51fd\u6570\u6216\u8005\u53d1\u9001\u6d88\u606f\u7ed9RN\n \/\/\u5fc5\u987b\u58f0\u660eReactMethod\u6ce8\u89e3\n @ReactMethod\n public void showNativeMsg(String msg) {\n Toast.makeText(context, msg, Toast.LENGTH_LONG).show();\n }\n\n @ReactMethod\n public void startMyActivity(){\n Intent intent = new Intent(context, MyActivity.class);\n intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);\n context.startActivity(intent);\n }\n}<\/code><\/pre>\nMyReactPackage.java<\/p>\n
public class MyReactPackage implements ReactPackage {\n\n @Override\n public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {\n return Arrays.<NativeModule>asList(\n new MyNativeModule(reactContext)\n );\n }\n\n @Override\n public List<Class<? extends JavaScriptModule>> createJSModules() {\n return Collections.emptyList();\n }\n\n @Override\n public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {\n return Arrays.<ViewManager>asList(\n new FocusedTextViewManager(),\n new SettingItemViewManager()\n );\n }\n}<\/code><\/pre>\nMainApplication.java<\/p>\n
@Override\nprotected List<ReactPackage> getPackages() {\n return Arrays.<ReactPackage>asList(\n new MainReactPackage(), new MyReactPackage()\n );\n}<\/code><\/pre>\nFocusedTextView.js<\/p>\n
import React, { Component, PropTypes } from 'react';\nimport {\n requireNativeComponent,\n Text,\n View\n} from 'react-native';\n\nlet iface = {\n name:'FocusedTextView',\n propTypes:{\n text:PropTypes.string,\n ...View.propTypes\n },\n};\n\nmodule.exports = requireNativeComponent('FocusedTextView', iface);<\/code><\/pre>\nSettingItemView.js<\/p>\n
import React, { Component, PropTypes } from 'react';\nimport {\n requireNativeComponent,\n Text,\n View\n} from 'react-native';\n\nlet iface = {\n name:'SettingItemView',\n propTypes:{\n desc:PropTypes.string,\n title:PropTypes.string,\n isChecked:PropTypes.bool,\n ...View.propTypes\n },\n};\n\nmodule.exports = requireNativeComponent('SettingItemView', iface);<\/code><\/pre>\nindex.android.js<\/p>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from 'react';\nimport {\n AppRegistry,\n StyleSheet,\n Text,\n View,\n NativeModules,\n TouchableOpacity\n} from 'react-native';\n\nimport FocusedTextView from '.\/FocusedTextView.js';\nimport SettingItemView from '.\/SettingItemView.js';\nimport Dimensions from 'Dimensions';\n\nlet width = Dimensions.get('window').width;\n\nclass RNAPP extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isChecked:false,\n desc:'\u81ea\u52a8\u66f4\u65b0\u5df2\u7ecf\u5173\u95ed',\n title:'\u8bbe\u7f6e\u662f\u5426\u81ea\u52a8\u66f4\u65b0',\n };\n }\n\n render() {\n return (\n <View style={styles.container}>\n <Text style={styles.welcome}>\n Welcome to React Native!\n <\/Text>\n <Text style={styles.welcome}>\n React Native\u6df7\u5408\u539f\u751f\u5f00\u53d1\n <\/Text>\n <Text style={styles.instructions}>\n Powered by rnapp.cc\n <\/Text>\n <Text onPress={this.startMyActivity.bind(this)} style={styles.btn}>\u542f\u52a8\u539f\u751f\u754c\u9762<\/Text>\n <FocusedTextView\n style={{ width: width - 40, height: 30, marginTop: 10 }}\n text='\u6b22\u8fce\u89c2\u4e34 React Native APP \u5f00\u53d1\u793e\u533a\uff0c\u4e00\u4e2a\u9760\u8c31\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u5f00\u53d1\u6280\u672f\u4ea4\u6d41\u5e73\u53f0'\n \/>\n <TouchableOpacity onPress={this.setAutoUpdate}>\n <SettingItemView\n style={{ width: width - 20, height: 68, marginTop: 10 }}\n title={this.state.title}\n desc={this.state.desc}\n isChecked={this.state.isChecked}\n \/>\n <\/TouchableOpacity>\n <\/View>\n );\n }\n\n startMyActivity = () => {\n NativeModules.MyNativeModule.startMyActivity();\n }\n\n setAutoUpdate = () => {\n if(this.state.isChecked){\n this.setState({\n isChecked:false,\n desc:'\u81ea\u52a8\u66f4\u65b0\u5df2\u7ecf\u5173\u95ed',\n });\n } else {\n this.setState({\n isChecked:true,\n desc:'\u81ea\u52a8\u66f4\u65b0\u5f00\u542f\u5566',\n });\n }\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n welcome: {\n fontSize: 20,\n textAlign: 'center',\n margin: 10,\n },\n instructions: {\n textAlign: 'center',\n color: '#333333',\n marginBottom: 5,\n },\n btn: {\n marginTop: 20,\n marginLeft: 10,\n marginRight: 10,\n width: 260,\n height: 35,\n backgroundColor: '#3BC1FF',\n color: '#fff',\n lineHeight: 24,\n fontWeight: 'bold',\n textAlign: 'center',\n textAlignVertical:'center'\n },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\nMyActivity.java<\/p>\n
public class MyActivity extends AppCompatActivity {\n private SettingItemView siv_update;\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_my);\n\n siv_update = (SettingItemView) this.findViewById(R.id.siv_update);\n siv_update.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View view) {\n if (siv_update.isChecked()) {\n siv_update.setChecked(false);\n siv_update.setDesc("\u81ea\u52a8\u66f4\u65b0\u5df2\u7ecf\u5173\u95ed");\n } else {\n siv_update.setChecked(true);\n siv_update.setDesc("\u81ea\u52a8\u66f4\u65b0\u5f00\u542f\u5566\uff01");\n }\n }\n });\n }\n\n public void onBack(View v) {\n finish();\n }\n}<\/code><\/pre>\nSettingItemView.java<\/p>\n
public class SettingItemView extends RelativeLayout {\n\n private TextView tv_desc;\n private TextView tv_title;\n private CheckBox cb_status;\n\n public SettingItemView(Context context) {\n super(context);\n iniView(context);\n }\n\n public SettingItemView(Context context, AttributeSet attrs) {\n super(context, attrs);\n iniView(context);\n }\n\n public SettingItemView(Context context, AttributeSet attrs, int defStyleAttr) {\n super(context, attrs, defStyleAttr);\n iniView(context);\n }\n\n private void iniView(Context context) {\n View.inflate(context, R.layout.setting_item_view, this);\n cb_status = (CheckBox) this.findViewById(R.id.cb_status);\n tv_desc = (TextView) this.findViewById(R.id.tv_desc);\n tv_title = (TextView) this.findViewById(R.id.tv_title);\n }\n\n \/**\n * \u6821\u9a8c\u7ec4\u5408\u63a7\u4ef6\u662f\u5426\u9009\u4e2d\n * @return\n *\/\n public boolean isChecked() {\n return cb_status.isChecked();\n }\n\n \/**\n * \u8bbe\u7f6e\u7ec4\u5408\u63a7\u4ef6\u7684\u72b6\u6001\n * @param checked\n *\/\n public void setChecked(boolean checked) {\n cb_status.setChecked(checked);\n }\n\n \/**\n * \u8bbe\u7f6e\u7ec4\u5408\u63a7\u4ef6\u7684\u63cf\u8ff0\u4fe1\u606f\n * @param text\n *\/\n public void setDesc(String text) {\n tv_desc.setText(text);\n }\n\n \/**\n * \u8bbe\u7f6e\u7ec4\u5408\u63a7\u4ef6\u7684\u6807\u9898\n * @param title\n *\/\n public void setTitle(String title){\n tv_title.setText(title);\n }\n}<\/code><\/pre>\nactivity_my.xml<\/p>\n
<?xml version="1.0" encoding="utf-8"?>\n<LinearLayout\n android:layout_width="match_parent"\n android:layout_height="wrap_content"\n android:orientation="vertical"\n xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n >\n <TextView\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_marginTop="200dp"\n android:text="Powered by RNAPP.CC"\n android:paddingLeft="10dp"\n android:paddingRight="10dp"\n android:textSize="20sp"\n android:layout_gravity="center_horizontal"\/>\n <Button\n android:onClick="onBack"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_gravity="center_horizontal"\n android:layout_marginTop="20dp"\n android:background="#3BC1FF"\n android:paddingLeft="10dp"\n android:paddingRight="10dp"\n android:text="\u539f\u751f\u6309\u94ae - \u70b9\u51fb\u9000\u51fa"\n android:textSize="16sp"\n android:textColor="#FFFFFF"\n \/>\n <cc.rnapp.view.FocusedTextView\n android:layout_width="match_parent"\n android:layout_height="wrap_content"\n android:layout_marginTop="20dp"\n android:layout_marginLeft="10dp"\n android:layout_marginRight="10dp"\n android:text="\u6b22\u8fce\u89c2\u4e34 React Native APP \u5f00\u53d1\u793e\u533a\uff0c\u4e00\u4e2a\u9760\u8c31\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u5f00\u53d1\u6280\u672f\u4ea4\u6d41\u5e73\u53f0"\n android:textSize="18sp"\n android:textColor="#FF0000"\n android:ellipsize="marquee"\n android:singleLine="true"\n \/>\n <cc.rnapp.view.SettingItemView\n android:id="@+id\/siv_update"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_marginTop="20dp"\n \/>\n<\/LinearLayout><\/code><\/pre>\nsetting_item_view.xml<\/p>\n
<RelativeLayout\n android:layout_width="match_parent"\n android:layout_height="60dp"\n xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n >\n <TextView\n android:id="@+id\/tv_title"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_marginLeft="10dp"\n android:layout_marginRight="10dp"\n android:text="\u8bbe\u7f6e\u662f\u5426\u81ea\u52a8\u66f4\u65b0"\n android:textColor="#000000"\n android:textSize="20sp"\/>\n <TextView\n android:id="@+id\/tv_desc"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content" \n android:layout_below="@+id\/tv_title"\n android:layout_marginLeft="10dp"\n android:text="\u81ea\u52a8\u66f4\u65b0\u5df2\u7ecf\u5173\u95ed"\n android:textColor="#88000000"\n android:textSize="18sp"\n \/>\n <CheckBox\n android:id="@+id\/cb_status"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_alignParentRight="true"\n android:layout_marginRight="10dp"\n android:layout_centerVertical="true"\n android:clickable="false"\n android:focusable="false"\n \/>\n <View\n android:layout_width="match_parent"\n android:layout_height="0.2dp"\n android:layout_marginLeft="5dp"\n android:layout_marginRight="5dp"\n android:layout_alignParentBottom="true"\n android:background="#000000"\n \/>\n<\/RelativeLayout><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u5b9e\u4f8b1\uff1a\u539f\u751f\u63a7\u4ef6\uff0c\u901a\u8fc7\u5c5e\u6027\u8c03\u7528\u539f\u751f\u63a7\u4ef6\u7684\u65b9\u6cd5\uff0c\u5b9e\u73b0\u8dd1\u9a6c\u706f\u6548\u679c \u5b9e\u4f8b2\uff1a\u7ec4\u5408\u63a7\u4ef6\uff0c\u901a\u8fc7\u5c5e\u6027\u8c03\u7528\u7ec4\u5408\u63a7\u4ef6\u7684\u65b9\u6cd5\uff0c\u5b9e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-519","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=519"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/519\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}