Question

我在下面创建了一个登录活动，是屏幕截图和代码 enter image description here

代码是

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Image,
  ScrollView,
  Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import s from './styles/main.js';

class skatebay extends React.Component{

  render(){
    const { navigate } = this.props.navigation;
    return (

  <View style={s.container}>

      <View style={s.toolbar}>
        <TouchableHighlight style={s.toolbarButton} onPress={() => navigate('Profile')}
          title="Profile">
          <Image style={s.toolIcon} source={require('./gfx/profile.png')}/>
        </TouchableHighlight>

        <TouchableHighlight style={s.toolbarTitle} onPress={alert}>
          <Image style={s.logo} source={require('./gfx/logos.png')}/>
        </TouchableHighlight>

        <TouchableHighlight style={s.toolbarButton} onPress={alert}>
          <Image style={s.toolIcon} source={require('./gfx/settings.png')}/>
        </TouchableHighlight>
      </View>

      </View>
    );
    }
}

现在我想将此活动更改为下面的一个 editText的浅黑色背景只是想构建这样的设计 enter image description here

Answer 1

将transparent-black（#D8000000）背景颜色设置为您的容器RelativeLayout
将dark-grey（#3F4045）背景颜色设置为EditText's

试试这个：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="pk.itbrowser.rehbar.LoginActivity"
android:layout_marginTop="20sp"
android:layout_marginRight="20sp"
android:layout_marginLeft="20sp"
android:background="#D8000000"> <!-- Transparent-Black -->

<LinearLayout
    android:id="@+id/linearLayout"
    android:background="@android:color/transparent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="10">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:text="Login with Email"
        android:textSize="20sp"
        android:gravity="center"/>

    <EditText
        android:layout_marginTop="2sp"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:background="#3F4045"
        android:hint="Email"/>

    <EditText
        android:layout_marginTop="2sp"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:background="#3F4045"
        android:hint="Password"
        android:inputType="textPassword"/>

    <Button
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:textColor="@color/white"
        android:background="@color/colorAccent"
        android:text="Login"/>

    <Button
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:text="Need an Account?"
        android:layout_weight="1"/>

    <TextView
        android:layout_marginTop="10sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Forget Password?"
        android:layout_centerInParent="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:gravity="center" />
</LinearLayout>

希望这会有所帮助〜

Answer 2

您需要为Manifest中的Activity

声明透明主题

android:theme="@android:style/Theme.Translucent"

并将布局背景设置为透明黑色

android:background="#44000000"

如何使背景透明并改变我的活动设计

2 个答案: