Question

我是反应原生的初学者，我试图创建一个包含图像和按钮的视图。

welcomepage.js

import React,{Component} from 'react';
import { View,Image,StyleSheet } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
export default class WelcomePage extends Component {
    render() {
        return (
            <View style={{flexDirection:'column',flex:1,alignItems:'center',justifyContent: 'center'}}>
            <Avatar
              width={450}
              containerStyle={{flex: 0.37}}
              imageProps={{resizeMode:'cover'}}
              source={require('../assets/images/logo.png')}
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
            />
            <View style={{flexDirection:'row',flex:0.5}}>
                <Button  large title='LOGIN' icon={{name: 'user-secret',type:'font-awesome'}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
                <Button  large title='REGISTER' icon={{name: 'user-plus',type:'font-awesome'}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
            </View> 
            </View>
        )
    }
}

app.js

import React, { Component } from 'react';
import WelcomePage from './components/welcomePage';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <WelcomePage />
      </View>
    );
  }
}

**输出**

在上面的代码中一切正常，但我怎样才能将图像调整到屏幕的左，右和上方位置？

Answer 1

由于Avatar中的react-native-elements是Image包裹在组件中，因此您可以执行以下操作

请注意，screenWidth道具需要删除，因为它是特定的布局道具。

您需要提供wraps，因为该组件的制作方式children elements基于import React,{Component} from 'react'; import { View,Image,StyleSheet, Dimensions } from 'react-native'; import { Card,Button,Avatar } from 'react-native-elements'; const {width} = Dimensions.get('window') export default class WelcomePage extends Component { render() { return ( <View style={{flex:1, alignItems: 'center'}}> <Avatar width={width} overlayContainerStyle={{flex: 0.4}} /*Some Layout fixes*/ imageProps={{resizeMode: 'cover'}} /*If you want your image to scale*/ source={{uri: 'https://i.stack.imgur.com/uoVWQ.png'}} onPress={() => console.log("Works!")} activeOpacity={0.7} /> <View style={{flexDirection:'row', flex: 0.6}}> <Button title='LOGIN' /> <Button title='REGISTER' /> </View> </View> ) } }。

<强> WelcomePage.js

<View style={{flex:1}}>
    <WelcomePage />
 </View>

<强> App.js

var ShowResult = document.getElementsByName("woodtypeAB[3]").value

如何将反应本机元素头像图像组件适合屏幕？

1 个答案: