Hizalama İşlemleri

  Yatay ve Dikey Hizalama

import React from 'react';
import {Text, View} from 'react-native';

const YourApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Try editing me! ????</Text>
    </View>
  );
};

export default YourApp;

 

Örnek 2:

import React, { Component } from "react";  
import { StyleSheet, View, TextInput, Button } from "react-native";  
 
export default class App extends Component {  
 
    render() {  
        return (  
            <View style={styles.container}>  
                <View style={styles.innerContainer}>  
                    <TextInput  
                            placeholder="An awesome place"  
                            style={styles.textStyle}  
                    />  
                    <Button  
                            title="Button"  
                            onPress={this.placeSubmitHandler}  
                    />  
                </View>  
                <View style={styles.innerContainer2}>  
                    <TextInput  
                            placeholder="An awesome place"  
                            style={styles.textStyle}  
                    />  
                    <Button  
                            title="Button"  
                            onPress={this.placeSubmitHandler}  
                    />  
                </View>
            </View>  
        );  
    }  
}  
 
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        padding: 26,  
        backgroundColor: "#fff",  
        //justifyContent: "flex-start"  
    },  
    innerContainer:{  
       // flex: 1,  
        width: "100%",  
        //flexDirection: "row",  
        justifyContent: "space-between",  
        alignItems: "center"  
    },  
    innerContainer2:{  
       // flex: 1,  
        width: "100%",  
        flexDirection: "row",  
        justifyContent: "space-between",  
        alignItems: "center"  
    },  
    textStyle:{  
        width: "70%",  
        backgroundColor: "gray",  
    }
});

 

Kaynak

Yorumunuzu Ekleyin

Yükleniyor...