React本机TouchableOpacity全角样式不起作用
React本机TouchableOpacity全角样式不起作用
提问于 2021-01-24 09:38:38
我正在尝试把一个简单的用户名-密码-登录按钮布局在react-native中。我发现的问题是TouchableOpacity按钮区的样式。我已经将宽度设置为80%，但按钮宽度仍然只显示文本“登录”所需。我希望按钮区域是全宽的或80%。
const Practice27 = (props) => {
const [text, setText] = useState("");
const [textp, setTextp] = useState("");
return (
<View style={styles.container}>
<View style={styles.inputView}>
<TextInput
placeholder="Username..."
value={text}
keyboardType="email-address"
style={styles.inputText}
onChangeText={(text) => {
setText(text);
username = text;
}}
></TextInput>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Password..."
style={styles.inputText}
secureTextEntry={true}
value={textp}
onChangeText={(textp) => {
setTextp(textp);
password = textp;
}}
></TextInput>
</View>
<TouchableOpacity style={styles.loginBtn} onPress={login}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
loginBtn: {
backgroundColor: "#33eacd",
height: 50,
justifyContent: "center",
alignItems: "center",
padding: 10,
borderRadius: 25,
width: "80%",
},
loginText: {
color: "white",
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
justifyContent: "center",
padding: 20,
},
inputText: {
height: 50,
color: "white",
},
});
export default Practice27;
回答 2
Stack Overflow用户
发布于 2021-01-24 12:02:46
const Practice27 = (props) => {
const [text, setText] = useState("");
const [textp, setTextp] = useState("");
return (
<View style={styles.container}>
<View style={styles.inputView}>
<TextInput
placeholder="Username..."
value={text}
keyboardType="email-address"
style={styles.inputText}
onChangeText={(text) => {
setText(text);
username = text;
}}
></TextInput>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Password..."
style={styles.inputText}
secureTextEntry={true}
value={textp}
onChangeText={(textp) => {
setTextp(textp);
password = textp;
}}
></TextInput>
</View>
<View style={styles.loginBtn}> //using a view tag here
<TouchableOpacity onPress={login}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
loginBtn: {
backgroundColor: "#33eacd",
height: 50,
justifyContent: "center",//you using alignitem center Thats why i remove this
padding: 10,
borderRadius: 25,
width: "80%",
},
loginText: {
color: "white",
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
padding: 20,
},
inputText: {
height: 50,
justifyContent: "center",
textAlign:"center"
color: "white",
},
});
export default Practice27;
只要复制和有害的it...This将为你工作…我给我的意见，我改变了…
Stack Overflow用户
发布于 2021-01-24 12:26:52
你可以使用尺寸给出宽度，高度，边距，填充等。当你使用尺寸时，它适用于不同的屏幕尺寸，没有问题。
import { Dimensions } from 'react-native';
const window = Dimensions.get('window');
const Practice27 = (props) => {
const [text, setText] = useState("");
const [textp, setTextp] = useState("");
return (
<View style={styles.container}>
<View style={styles.inputView}>
<TextInput
placeholder="Username..."
value={text}
keyboardType="email-address"
style={styles.inputText}
onChangeText={(text) => {
setText(text);
username = text;
}}
></TextInput>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Password..."
style={styles.inputText}
secureTextEntry={true}
value={textp}
onChangeText={(textp) => {
setTextp(textp);
password = textp;
}}
></TextInput>
</View>
<TouchableOpacity style={styles.loginBtn} onPress={login}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
loginBtn: {
backgroundColor: "#33eacd",
height: 50,
justifyContent: "center",
alignItems: "center",
padding: 10,
borderRadius: 25,
width: (window.width)*0.9,//this means button get width window-width*0.9
},
loginText: {
color: "white",
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
justifyContent: "center",
padding: 20,
},
inputText: {
height: 50,
color: "white",
},
});
export default Practice27;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65869038
复制相关文章
相似问题
腾讯云开发者
