javascript 如何在 react native 的同一行上设置两个输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45819846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set Two inputs on same row in react native ?
提问by Madhur
Hey I want to set two textInputs on same line , named Expiration date and CVV in android simulator.
嘿，我想在同一行上设置两个 textInputs，在 android 模拟器中命名为 Expiration date 和 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>
Here it is including CSS for both textInputs \
这里包含两个 textInputs 的 CSS \
inputWrap: {
borderColor: '#cccccc',
borderBottomWidth: 1,
marginBottom: 10,
},
inputdate: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
inputcvv: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
Please let me know how can i set this on same line.. thanks in advance
请让我知道如何在同一行上设置它.. 提前致谢
回答by j?vi
With React Native you need to use Flexboxfor laying out your components. Check out the Flexbox docs here.
使用 React Native，你需要使用Flexbox来布置你的组件。在此处查看Flexbox 文档。
You want to do something like this:
你想做这样的事情：
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"
}
});
The important part here is the flexDirection: "row"on the <View style={styles.row}>element and the flex: 1on the <View style={styles.inputWrap}>elements.
这里的重要部分是flexDirection: "row"在<View style={styles.row}>元素上和flex: 1在<View style={styles.inputWrap}>元素上。
You can edit and run this snippet with Snack (Expo):
您可以使用 Snack (Expo) 编辑和运行此代码段：
回答by Ganesh Cauda
you can try something like this
你可以试试这样的
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',
}
});
回答by Ashish Dulhani
Divide your overall view as shown in figure.
如图所示划分您的整体视图。
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,
},
});
Give margins wherever necessary.
必要时留出边距。
