React Native Country Picker
Một bộ chọn quốc gia cho react-native hỗ trợ cho android
Cài Đặt
npm install react-native-country-picker --save
Cài Đặt (Android)
...
include ':react-native-country-picker'
project(':react-native-country-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-country-picker/android')
-
Trong
android/app/build.gradle
…
dependencies {
…
compile project(‘:react-native-country-picker’)
} -
Đăng ký module (trong MainActivity.java)
import com.tofugear.countrypicker.*; // <— import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
……
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new CountryPickerPackage()) // <------ add here .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); setContentView(mReactRootView);
}
……
}
Màn hình mẫu
Sử Dụng
Ví dụ
var React = require('react-native');
var {
StyleSheet,
View,
Image
} = React;
var CountryPicker = require('react-native-country-picker');
var Button = require('react-native-simple-button');
module.exports = React.createClass({
getInitialState() {
return { code: null };
},
getSelectedCountry() {
var _this = this;
CountryPicker.show({
title: 'Title',
searchHintText: 'Search',
preferredCountryCocde: 'HK JP',
countryList: ['HK|+852|Hong Kong', 'JP|...'], // Optional
function(country){
_this.setState({ code: country.code });
});
},
render() {
return (
<View style={styles.container}>
<Text>{this.state.code}</Text>
<Button onPress={this.getSelectedCountry.bind(this)}>
Launch Country Picker
</Button>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'transparent',
paddingVertical:150,
}
});
cảm ơn
- Cảm ơn roomorama vì mã Java Fragment AndroidCountryPicker.
Thông tin tải về:
Tác giả: tofugear
Nguồn: https://github.com/tofugear/react-native-country-picker