我是新来的React Native
.
我使用两个按钮来添加TextInput
视图中的组件。
当我按下Add
按钮,按下一个TextInput
组件进入视图,当我按下Add Again
按钮,它会推动另一个TextInput
组件位于前一个组件下方。
但当我按下Add
再次按钮,它会按下TextInput
第一个组件下方。但我想把它推到最后一个以下。
Like : Add |Add | Add again.
但是我需要Add | Add Again | Add
等等。
可以采取什么措施来实现这一目标?
我已关注this.
'use strict';
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
TextInput,
} from 'react-native';
let index = 0
class Test extends Component{
constructor(){
super();
this.state = {
arr: []
};
}
insertSomeThing(){
this.state.arr.push(index++)
this.setState({ arr: this.state.arr })
}
render() {
let arr = this.state.arr.map((r, i) => {
return (
<View key={ i } style={styles.insertStyle}>
<TextInput placeholder = 'abc' />
</View>
);
})
let arrAnother = this.state.arr.map((r, i) => {
return (
<View key={ i } style={styles.insertStyle}>
<TextInput placeholder = 'def' />
</View>
);
})
return (
<View style={styles.container}>
<View>
<TouchableHighlight
onPress={ this.insertSomeThing.bind(this) }
style={styles.button}>
<Text>Add</Text>
</TouchableHighlight>
</View>
<View>
<TouchableHighlight
onPress={ this.insertSomeThing.bind(this) }
style={styles.button}>
<Text>Add Again</Text>
</TouchableHighlight>
</View>
{ arr }
{arrAnother}
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60,
},
insertStyle: {
height:40,
alignItems: 'center',
justifyContent: 'center',
borderBottomColor: '#ededed',
borderBottomWidth: 1
},
button: {
alignItems: 'center',
justifyContent: 'center',
height:55,
backgroundColor: '#ededed',
marginBottom:10
}
});
AppRegistry.registerComponent('Test', () => Test);