react-native - 在我的 react native expo 应用程序中，我的文本输入也看不到按钮

Question

我正在构建一个登录屏幕。我对它很新鲜。我在谷歌帮助下使用网格视图将我的 3 个按钮放在一行中。这是我的代码：

import { StatusBar } from 'expo-status-bar';
import React, {useState,useEffect, Component} from "react";
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export class GridView extends Component {

  render() {
    return (
       <View style={styles.container}>
          <View style={styles.buttonContainer}>
            <Button title="Button 1"/>
          </View>

          <View style={styles.buttonContainer}>
            <Button title="Button 2"/>
          </View>
          <View>
            <TouchableOpacity>
              <Text style={style.Email_btn}>
                Email
              </Text>
            </TouchableOpacity>
          </View>
      </View>
    );
   }
   }
   export default function App() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     return (
      <View style={styles.container}>
      <Text style={{color:'#ffffff', fontSize:28}}>LOG IN</Text>
      <StatusBar style="auto" />
      <View style={styles.inputView}>
    <TextInput
      style={styles.TextInput}
      autoCapitalize="none"
      placeholder="Email."
      placeholderTextColor="#003f5c"
      onChangeText={(email) => setEmail(email)}
    />
  </View>
    
  <View style={styles.inputView}>
    <TextInput
      style={styles.TextInput}
      placeholder="Password."
      placeholderTextColor="#003f5c"
      secureTextEntry={true}
      onChangeText={(password) => setPassword(password)}
    />
  </View>

  </View>
  );
  }

  const styles = StyleSheet.create({
  container: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
  },
  buttonContainer: {
     flex: 1,
  },
      Email_btn:{
      backgroundColor:"#1c313a",
      width:30,
      height:80,
     },
     container: {
    flex: 2,
    backgroundColor: '#455a64',
    /*alignItems:'flex-start',
   justifyContent: 'center'*/
   },



   inputView: {
   backgroundColor: '#1c313a',
   borderRadius: 30,
   width: "70%",
   height: 45,
   marginBottom: 20,

   alignItems: "center",
   },

   TextInput: {
   height: 50,
   flex: 1,
   padding: 10,
   marginLeft: 20,
  }
 });

网格视图类中的按钮应该出现在同一行中。在它们下面应该有电子邮件和密码文本输入。我看不到屏幕上的按钮，我的文本输入也没有从用户那里获取文本。请帮助我！

标签： react-nativebuttongridviewexpotextinput

Answer 1

您添加flexDirection:'row'到您的应用程序容器视图。这意味着您在其中添加的所有内容都将水平显示。

您也没有<GridView在App.

您需要交叉检查影响大部分布局的样式。

这是为您修改的代码段。

import React, {useState, Component} from "react";
import { StatusBar, Button, StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export class GridView extends Component {
  render() {
    return (
       <View style={styles.btnContainer}>
          <View style={styles.button}>
            <Button color={'white'} title="Button 1"/>
          </View>
          <View style={styles.button}>
            <Button color={'white'} title="Button 2"/>
          </View>
          <View style={[styles.button, styles.emailBtnWrap]}>
            <TouchableOpacity>
              <Text style={styles.emailBtn}>
                Email
              </Text>
            </TouchableOpacity>
          </View>
      </View>
    );
   }
}

export default function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
    return (
    <View style={styles.containerWrap}>
      <StatusBar />
      <View style={styles.textCenter}>
        <Text style={styles.textColor}>LOG IN</Text>
      </View>
      <View style={styles.formContainer}>
        <View style={styles.inputView}>
          <TextInput
            autoCapitalize="none"
            placeholder="Email."
            placeholderTextColor="#003f5c"
            onChangeText={(email) => setEmail(email)}
          />
        </View>
        <View style={styles.spacing12} />
        <View style={styles.inputView}>
          <TextInput
            placeholder="Password."
            placeholderTextColor="#003f5c"
            secureTextEntry={true}
            onChangeText={(password) => setPassword(password)}
          />
        </View>
      </View>
      <GridView />
    </View>
  );
}

const styles = StyleSheet.create({
  containerWrap: {
     flex: 1,
  },
  textCenter: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  },  
  textColor: {
    color:'#000', 
    fontSize:28
  },
  formContainer: {
    flex:1,
    padding:12
  },
  inputView: {
    backgroundColor: '#f9f9f9',
    borderRadius: 30,
    borderWidth:1,
    borderColor: '#ccc',
    paddingVertical:16,
    paddingHorizontal:12
  },
  spacing12: {
    marginVertical:12
  },

  btnContainer: {
    flexDirection: 'row'
  },
  button: {
    flex:1,
    backgroundColor:'blue',
    padding:12
  },
  emailBtnWrap: {
    backgroundColor:'green'
  },
  emailBtn: {
    color:'white'
  },
  btnColor: {
    color:'white'
  }

 });