如何在 React Native 的同一行设置两个输入?
How to set Two inputs on same row in react native ?
嘿,我想在同一行上设置两个文本输入,命名为
android 模拟器中的到期日期和 CVV。
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputdate} />
</View>
<Text style={styles.label}>CVV</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputcvv } maxLength={17} />
</View>
此处包含两个文本输入的 CSS
\
inputWrap: {
borderColor: '#cccccc',
borderBottomWidth: 1,
marginBottom: 10,
},
inputdate: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
inputcvv: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
请告诉我如何在同一行上设置它..在此先感谢
使用 React Native,您需要使用 Flexbox 来布置您的组件。查看 Flexbox docs here.
您想做这样的事情:
import React, { Component } from "react";
import { Text, View, StyleSheet, TextInput } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.row}>
<View style={styles.inputWrap}>
<Text style={styles.label}>Expiration date</Text>
<TextInput style={styles.inputdate} />
</View>
<View style={styles.inputWrap}>
<Text style={styles.label}>CVV</Text>
<TextInput style={styles.inputcvv} maxLength={17} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: "row"
},
inputWrap: {
flex: 1,
borderColor: "#cccccc",
borderBottomWidth: 1,
marginBottom: 10
},
inputdate: {
fontSize: 14,
marginBottom: -12,
color: "#6a4595"
},
inputcvv: {
fontSize: 14,
marginBottom: -12,
color: "#6a4595"
}
});
这里的重要部分是 <View style={styles.row}>
元素上的 flexDirection: "row"
和 <View style={styles.inputWrap}>
元素上的 flex: 1
。
您可以使用 Snack (Expo) 编辑和运行此片段:
你可以试试这个
render() {
return (
<View style={{
flexDirection: 'row',
alignItems: 'flex-start',
height:100
}}>
<View style={styles.inputWrap}>
<Text style={styles.label} >Expiration date</Text>
<TextInput style={styles.inputDate} />
</View>
<View style={styles.inputWrap}>
<Text style={styles.label}>CVV</Text>
<TextInput style={styles.inputCvv} maxLength={17} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
label: {
flex: 1,
fontWeight: 'bold'
},
inputWrap: {
flex: 1,
justifyContent: 'space-between',
flexDirection: 'column'
},
inputDate: {
flex: 1,
backgroundColor: '#108c96',
},
inputCvv: {
flex: 1,
backgroundColor: '#6fa511',
}
});
如图所示划分您的整体视图。
export default class App extends Component {
render() {
return (
<View style={styles.outerContainer}>
<View style={styles.innerContainer}>
<Text style={styles.fieldName}>
Name1
</Text>
<View style={styles.textInputContainer}>
<TextInput />
</View>
</View>
<View style={styles.innerContainer}>
<Text style={styles.fieldName}>
Name2
</Text>
<View style={styles.textInputContainer}>
<TextInput />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
innerContainer: {
flex: 0.5,
flexDirection: 'row'
},
fieldName: {
flex: 1,
},
textInputContainer: {
flex: 3,
},
});
必要时留出边距。
嘿,我想在同一行上设置两个文本输入,命名为 android 模拟器中的到期日期和 CVV。
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputdate} />
</View>
<Text style={styles.label}>CVV</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputcvv } maxLength={17} />
</View>
此处包含两个文本输入的 CSS \
inputWrap: {
borderColor: '#cccccc',
borderBottomWidth: 1,
marginBottom: 10,
},
inputdate: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
inputcvv: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
请告诉我如何在同一行上设置它..在此先感谢
使用 React Native,您需要使用 Flexbox 来布置您的组件。查看 Flexbox docs here.
您想做这样的事情:
import React, { Component } from "react";
import { Text, View, StyleSheet, TextInput } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.row}>
<View style={styles.inputWrap}>
<Text style={styles.label}>Expiration date</Text>
<TextInput style={styles.inputdate} />
</View>
<View style={styles.inputWrap}>
<Text style={styles.label}>CVV</Text>
<TextInput style={styles.inputcvv} maxLength={17} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: "row"
},
inputWrap: {
flex: 1,
borderColor: "#cccccc",
borderBottomWidth: 1,
marginBottom: 10
},
inputdate: {
fontSize: 14,
marginBottom: -12,
color: "#6a4595"
},
inputcvv: {
fontSize: 14,
marginBottom: -12,
color: "#6a4595"
}
});
这里的重要部分是 <View style={styles.row}>
元素上的 flexDirection: "row"
和 <View style={styles.inputWrap}>
元素上的 flex: 1
。
您可以使用 Snack (Expo) 编辑和运行此片段:
你可以试试这个
render() {
return (
<View style={{
flexDirection: 'row',
alignItems: 'flex-start',
height:100
}}>
<View style={styles.inputWrap}>
<Text style={styles.label} >Expiration date</Text>
<TextInput style={styles.inputDate} />
</View>
<View style={styles.inputWrap}>
<Text style={styles.label}>CVV</Text>
<TextInput style={styles.inputCvv} maxLength={17} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
label: {
flex: 1,
fontWeight: 'bold'
},
inputWrap: {
flex: 1,
justifyContent: 'space-between',
flexDirection: 'column'
},
inputDate: {
flex: 1,
backgroundColor: '#108c96',
},
inputCvv: {
flex: 1,
backgroundColor: '#6fa511',
}
});
如图所示划分您的整体视图。
export default class App extends Component {
render() {
return (
<View style={styles.outerContainer}>
<View style={styles.innerContainer}>
<Text style={styles.fieldName}>
Name1
</Text>
<View style={styles.textInputContainer}>
<TextInput />
</View>
</View>
<View style={styles.innerContainer}>
<Text style={styles.fieldName}>
Name2
</Text>
<View style={styles.textInputContainer}>
<TextInput />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
innerContainer: {
flex: 0.5,
flexDirection: 'row'
},
fieldName: {
flex: 1,
},
textInputContainer: {
flex: 3,
},
});
必要时留出边距。