我刚刚开始使用 React Native,我正在使用 RN 开发一个应用程序......我有点卡在这里......我在应用程序的一个组件中有一个表单,其中有几个 TextInputs 并排对齐,如图所示以下
这是我为实现上述设计而编写的代码。
import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableHighlight} from 'react-native';
export default class AddItems extends Component {
onAdd() {
alert('Hello');
}
render() {
return (
<View style={addItemStyles.wrapper}>
<View>
<Text>Item to give cash credit for:</Text>
<View>
<View>
<TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
</View>
<View>
<TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
</View>
</View>
</View>
</View>
);
}
}
const addItemStyles = StyleSheet.create({
wrapper: {
padding: 10,
backgroundColor: '#FFFFFF'
},
inputLabels: {
fontSize: 16,
color: '#000000',
marginBottom: 7,
},
inputField: {
backgroundColor: '#EEEEEE',
padding: 10,
color: '#505050',
height: 50
},
inputWrapper: {
paddingBottom: 20,
},
saveBtn: {
backgroundColor: '#003E7D',
alignItems: 'center',
padding: 12,
},
saveBtnText: {
color: '#FFFFFF',
fontSize: 18,
}
});
但相反,我得到了这样的观点。
我知道这可能是一件小事,但正如我上面所说,我刚刚开始使用 React Native,所以您可以将我视为菜鸟......在此先感谢您的帮助。期待您的回答。
最佳答案
在样式中使用“flexDirection”
render() {
return (
<View style={addItemStyles.wrapper}>
<View>
<Text>Item to give cash credit for:</Text>
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
</View>
<View style={{flex:1}}>
<TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
</View>
</View>
</View>
</View>
);
}
关于react-native - react native : Align two TextInputs side by side,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47673575/