在React Native中可以做什么来复制同样的视图?

时间:2016-09-08 05:43:42

标签: react-native

假设我有TextInputRadioButton。我从this安装了RadioButton个包。代码是:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';

class RadioSample extends Component {
  constructor () {
    super()
    this.state = {
      types: [{value: 0}],
      value: 0,
      valueIndex: 0,

    }
  }
  render () {
return (
  <View style={{flex:1}}>
    <View style={styles.component}>
    <TextInput placeholder = 'option' />
    <View>
        <RadioForm
          formHorizontal={false}
          animation={true}
        >
          {this.state.types.map((obj, i) => {
            var that = this;
            var is_selected = this.state.valueIndex == i;
            return (
              <View key={i} style={styles.radioButtonWrap}>
                <RadioButton
                  isSelected={is_selected}
                  obj={obj}
                  index={i}
                  labelHorizontal={true}
                  buttonColor={'#2196f3'}
                  labelColor={'#000'}
                  style={[i !== this.state.types.length-1 && styles.radioStyle]}
                  onPress={(value, index) => {
                    this.setState({value:value})
                    this.setState({valueIndex: index});
                  }}
                />
              </View>
            )
          })}
        </RadioForm>
    </View>

    </View>
     <Text style = {styles.button}> Add </Text>
  </View>
);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  component: {
    marginBottom: 15,
  },
  radioStyle: {
    borderRightWidth: 1,
    borderColor: '#2196f3',
    paddingRight: 10
  },
   radioButtonWrap: {
    marginRight: 5
  },
  button: {
    paddingLeft:150,
    paddingTop:20,
    height:55,
    backgroundColor: '#ededed',
  }
 });
AppRegistry.registerComponent('RadioSample', () => RadioSample);

这看起来像: enter image description here

但是,当我按下添加按钮时,我希望复制或复制给定的TextInputRadioButton。每当我按下按钮时,我都希望TextInputRadioButton。有什么可能的方法呢?可以做些什么来解决这个问题?

0 个答案:

没有答案