Question

我很反应原生，我正在尝试为我的主页创建一个反应原生的布局，但我无法实现我的最终设计。以下是我面临的问题

1-图像未加载到容器中

2-我无法为小容器获得正确的阴影

3-当与最终输出匹配时，总对齐似乎是旧的。

import React from 'react';
import { StyleSheet,
           Text,
           View ,
           Image,
           ImageBackground} from 'react-native';
import LocalImage from './components/localimage';

export default class App extends React.Component {
render() {
return (
  <View style={styles.container}>
    <View style={[styles.boxContainer,styles.boxOne]}>
        <Text>Header</Text>
    </View>
    <View style={[styles.boxContainer,styles.boxTwo]}>
      <View style = {styles.headerImage}>
        <Image source ={{uri 
   :'https://s3.amazonaws.com/celebrasain2018/pic.jpg'}}/>
      </View>
    </View>
    <View style={[styles.boxContainer,styles.boxThree]}>
      <View style={[styles.boxHead]}>
          <View style={styles.innerBoxone}>
            <View style={styles.iBoxone} ><Text>box 1</Text></View>
            <View style={styles.iBoxTwo}><Text>box 2</Text></View>
            <View style={styles.iBoxThree}><Text>box 3</Text></View>
            <View style={styles.iBoxFour}><Text>box 4</Text></View>
          </View>
          <View style={styles.innerBoxTwo}>
            <View style={styles.kBoxOne} ><Text>second box 1</Text></View>
            <View style={styles.kBoxTwo}><Text>second box 2</Text></View>
            <View style={styles.kBoxThree}><Text>second box 3</Text></View>
            <View style={styles.kBoxFour}><Text>second box 4</Text></View>
          </View>
      </View>
    </View>
  </View>
    );
   }
 }

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column'
},
boxContainer:{
flex:1,
alignItems:'center',
justifyContent:'center'
},
boxOne:{
flex:1,
backgroundColor :'#FFEEE4'
},
boxTwo:{
flex:3,
backgroundColor :'#F9F9F9',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
marginLeft :10,
marginRight:10
},
headerImage:{
width: 50,
height: 50
},
boxThree:{
flex:6,
backgroundColor :'#F9F9F9',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
marginBottom: 10
},
boxHead:{
flex :1,
flexDirection :'row'
},
innerBoxone:{
flex:1,
backgroundColor :'#F9F9F9',
justifyContent: 'space-around',
alignItems: 'stretch',
flexWrap: 'wrap',
marginRight: 5
},
innerBoxTwo:{
flex:1,
backgroundColor :'#F9F9F9',
justifyContent: 'space-around',
alignItems: 'stretch',
flexWrap: 'wrap',
marginLeft: 5
},
iBoxone:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#ddd',
borderBottomWidth:0 ,
padding:32,
shadowColor: 'black',
shadowOffset:{width: 0, height: 2},
elevation: 1,
shadowOpacity: 0.8,
shadowRadius: 2
},
iBoxTwo:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
},
iBoxThree:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
},
iBoxFour:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
},
kBoxOne:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
},
kBoxTwo:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
},
kBoxThree:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
},
kBoxFour:{
backgroundColor :'#FFF',
borderWidth: 2,
borderRadius:20,
borderColor:'#e5e6e8',
padding:32
}
});

任何帮助都会受到赞赏。

由于

Answer 1

不是为图像的容器设置样式，而是使用height，width，borderRadius等对图像进行样式设置。完成图像后，调整其容器{{ 1}}。你可能想在标题和第一个内容之间增加一些余量。
根据您的设计，我认为您需要的是View和borderRadius小容器，而不是影子。
您不需要为每个框创建单独的样式对象，而是创建borderWidth，循环并从单个框生成多个框的方法，并使用{{{ 1}}功能。你可以在一个样式对象中拥有盒子的所有样式，如果你想将一些额外的样式应用到其中一个盒子，你可以提供和样式数组到这样的同一个对象

样式和布局有助于本机反应

1 个答案: