如何使用NPM世界国家(RN)

时间:2018-10-31 19:25:42

标签: reactjs react-native

很抱歉,这是一个愚蠢的问题,但我不知如何使用此npm软件包:https://www.npmjs.com/package/world-countries

就目前而言,我有这个库在RN https://github.com/gcanti/tcomb-form-native#rendering-options

中工作

,我想添加一个附加字段,用户可以在其中选择他们来自哪个国家/地区。当我运行npm i world-countries时,它已安装到我的依赖项中,仅此而已。我不清楚如何获得预期的功能。

请查看图片以查看我当前正在运行什么。

What I have now

import React from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from "react-native";
import t from "tcomb-form-native";
import Country from './components/countrys';

var Form = t.form.Form;



// here we are: define your domain model
var Person = t.struct({
  name: t.String, // a required string
  surname: t.maybe(t.String), // an optional string
  age: t.Number, // a required number
  Country: t.String, //a required country
  rememberMe: t.Boolean, // a boolean
});


var options = {}; // optional rendering options (see documentation)

class AwesomeProject extends React.Component {
  constructor(props) {
    super(props);
    //this.onPress = this.bind.onPress(this);
    this.onPress = this.onPress.bind(this);
  }

  onPress() {
    // call getValue() to get the values of the form
    var value = this.refs.form.getValue();
    if (value) {
      // if validation fails, value will be null
      console.log(value); // value here is an instance of Person
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {/* display */}
        <Form ref="form" type={Person} options={options} />
        <TouchableHighlight
          style={styles.button}
          underlayColor="#99d9f4"
        >
          <Text style={styles.buttonText}>Save</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

export default AwesomeProject;

var styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    marginTop: 50,
    padding: 20,
    backgroundColor: "#ffffff"
  },
  buttonText: {
    fontSize: 18,
    color: "white",
    alignSelf: "center"
  },
  button: {
    height: 36,
    backgroundColor: "#48BBEC",
    borderColor: "#48BBEC",
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: "stretch",
    justifyContent: "center"
  }
});

0 个答案:

没有答案