React Native TouchableOpacity全宽度样式不工作

Question

我试图把一个简单的用户名密码登录按钮布局在react-native。我发现的问题是在TouchableOpacity按钮区域的样式。我把宽度设置为80%，但按钮宽度仍然只显示文本"LOGIN"需要。我想让这个按钮区域的宽度为全宽或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;

Answer 1

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;

只是复制和害虫…这对你有用……

Answer 2

你可以使用尺寸给宽度，高度，边距，填充等。当你使用尺寸，它工作不同的屏幕尺寸没有问题。

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;