登录按钮渲染问题 - React Native

Question

好的，我的登录按钮有一个小但非常烦人的样式问题。

它是来自 React Native 库的

TouchableOpacity

元素。

我不知道为什么，但它在中间被切断...我尝试了很多不同的样式，例如更改行高和添加填充等...但它不起作用。尝试删除它并重新添加它...但不起作用。

看起来像这样：

这是完整的代码和样式：

return (
 <View style={styles.container}>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Email"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setEmail(text)}
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            secureTextEntry
            placeholder="Password"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setPassword(text)}
          />
        </View>
        <View style={styles.inputView}>
          <TouchableOpacity
              onPress = {onPressLogin}
              style={styles.loginBtn}>
              <Text>Log in.</Text>
          </TouchableOpacity>
        </View>
        <View>
          <Button
            onPress={() => {setShowRegisterForm(!showRegisterForm)}}
            style={styles.registerBtn}
            title='Register'
          />
        </View>
 </View>
);

const styles = StyleSheet.create({
  inputView:{
    width:"80%",
    backgroundColor:"#3AB4BA",
    borderRadius:25,
    height:50,
    marginBottom:20,
    justifyContent:"center",
    padding:20
  },
  loginBtn: {
    textAlign:'center',   
  },
});

我必须按下按钮的上半部分才能使按钮正常工作。

请帮忙修复。

更新

我已经完全删除了

TouchableOpacity

并用按钮替换了它。但是，不透明度似乎卡在原处并且不渲染按钮。我已经清除了缓存，甚至删除了我的 node_modules 文件夹，并执行了

npm install

重新安装了所有依赖项，但问题仍然存在。我正在使用

expo start -clear

运行该项目。我将在下面显示我的代码和屏幕截图。

模板代码：

    return (
      <View style={styles.container}>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            placeholder="Email"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setEmail(text)}
          />
        </View>
        <View style={styles.inputView}>
          <TextInput
            style={styles.inputText}
            secureTextEntry
            placeholder="Password"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setPassword(text)}
          />
        </View>
        <View style={styles.inputView}>
          <Button
              onPress={() => {onPressLogin()}}
              title='Log In'
            />
        </View>
        <View>
          <Button
            onPress={() => {setShowRegisterForm(!showRegisterForm)}}
            style={styles.registerBtn}
            title='Register'
          />
        </View>
    </View>
    );

再次强调，

TouchableOpacity

根本不会消失，“登录”按钮也不会呈现。

Answer 1

试试这个风格

const CustomButton = () => {
  return (
    <View
    // style={styles.container}
    >
      <TouchableOpacity
        //  onPress = {onPressLogin}
        style={{alignItems: 'center'}}>
        <View
          style={
            // styles.inputView
            {
              width: '80%',
              backgroundColor: '#3AB4BA',
              borderRadius: 25,
              // height:50,
              marginBottom: 20,
              justifyContent: 'center',
              paddingVertical: 12,
              paddingHorizontal: 20,
              alignItems: 'center',
            }
          }>
          <Text>Log in.</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};