样式和布局有助于原生反应

Question

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

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

1. 不要设置图像容器的样式，而是使用height、width、borderRadius 等设置图像本身的样式。完成图像后，调整其容器View。您可能想要在标题和第一个内容之间添加更多边距。

2. 我认为您需要的是 borderRadius 和 borderWidth 用于根据您的设计设计的小容器，而不是阴影。

3. 您不需要为您拥有的每个盒子创建单独的样式对象，而是创建 flatlist，这是一种从单个盒子循环和生成多个盒子的方法，并使用 flexbox 功能在组中设置它们的样式.您可以在一个样式对象中拥有框的所有样式，如果您想对其中一个框应用一些额外的样式，您可以像这样向同一个对象提供样式数组