Question

我是新手反应框架，想在按钮点击时显示一个pickerIOS。但是，我无法理解在事件中调用其他类的想法。

我已从反应原生网站复制此代码：

var PickerItemIOS = PickerIOS.Item;

var CAR_MAKES_AND_MODELS = {
  amc: {
    name: 'AMC',
    models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
  },
  alfa: {
    name: 'Alfa-Romeo',
    models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
  },
  aston: {
    name: 'Aston Martin',
    models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
  }
};

var PickerExample = React.createClass({
  getInitialState: function() {
    return {
      carMake: 'aston',
      modelIndex: 1,
    };
  },

  render: function() {
    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
      <View>
        <Text>Please choose a make for your car:</Text>
        <PickerIOS
          selectedValue={this.state.carMake}
          onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
          {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
            <PickerItemIOS
              key={carMake}
              value={carMake}
              label={CAR_MAKES_AND_MODELS[carMake].name}
            />
          ))}
        </PickerIOS>
        <Text>Please choose a model of {make.name}:</Text>
        <PickerIOS
          selectedValue={this.state.modelIndex}
          key={this.state.carMake}
          onValueChange={(modelIndex) => this.setState({modelIndex})}>
          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
            <PickerItemIOS
              key={this.state.carMake + '_' + modelIndex}
              value={modelIndex}
              label={modelName}
            />
          ))}
        </PickerIOS>
        <Text>You selected: {selectionString}</Text>
      </View>
    );
  },
});

还有另一个课我在按钮点击时显示一个改动框。

class AwesomeProject extends Component {
    render() {

        return ( 
            <View style = {styles.group} >
                <NavigatorIOS style = {styles.group}
                initialRoute = {{
                        component: AccordionList,
                        title: 'Example List',
                        rightButtonIcon: require('./img/translate.png'),
                        onRightButtonPress: () => {

                        AlertIOS.alert(
                                'Bar Button Action',
                                'Recognized a tap on the bar button icon', [{
                                    text: 'OK',
                                    onPress: () => console.log('Tapped OK'),
                                }, ]
                            );
                        }
                    }
                }
                barTintColor = "#0391D7"
                titleTextColor = "#fff"
                tintColor = '#fff' />
                <View style = {styles.line}/> 
            </View>
        );
    }
}

如果我想调用pickerIOS而不是alertIOS。我怎样才能做到这一点？

Answer 1

您应该将要显示或隐藏的视图包装在Modal中，

了解React Native Modal here

显示PickerIOS按钮单击in native native

1 个答案: