反应原始位置绝对不起作用

时间:2018-02-08 20:21:14

标签: javascript android reactjs react-native mobile-development

我已经坚持一个问题,开发反应Android手机的本机应用程序。我不知道为什么,但绝对选项的设置位置不适用于Android,适用于IOS。我需要你的帮助!

Stackoverflow要求我添加更多细节,但我不知道其他细节应该在哪里 - 这就是为什么这是无用的句子:)。

<ScrollView>
  <View style={styles.container}>
    <View style={{width: '97%'}}>
      <FormLabel>Ship title</FormLabel>
      <FormInput containerStyle={styles.inputShipTitle}/>
      <Card title='Pickup Address' titleNumberOfLines={1} dividerStyle={{width: 0}}>
        <View>
          <Icon
            iconStyle={styles.iconPickup}
            name='map-marker' type='font-awesome'
            size={normalize(25)}
          />
          <Text style={styles.additionalText}>Tap to select the pickup address</Text>
        </View>
      </Card>
      <Card title='Delivery Address' titleNumberOfLines={1} dividerStyle={{width: 0}}>
        <View>
          <Icon
            iconStyle={styles.iconTruck}
            name='truck' type='font-awesome'
            size={normalize(23)}
          />
          <Text style={styles.additionalText}>Tap to select the delivery address</Text>
        </View>
      </Card>
      <Card title='Pickup date' titleNumberOfLines={1} dividerStyle={{width: 0}}>
        <View>
          <Icon
            iconStyle={styles.icon}
            name='calendar' type='font-awesome'
            size={normalize(23)}
          />
          <Text style={styles.additionalText}>Tap to select the pickup date</Text>
        </View>
      </Card>
      <Card title='Pickup time' titleNumberOfLines={1} dividerStyle={{width: 0}}>
        <View>
          <Icon
            iconStyle={styles.icon}
            name='clock-o' type='font-awesome'
            size={normalize(23)}
          />
          <Text style={styles.additionalText}>Tap to select the pickup time</Text>
        </View>
      </Card>
      <Card title='Add Photo or Video'
            titleNumberOfLines={1}
            dividerStyle={{width: 0}}>
        <View>
          <Icon
            iconStyle={styles.iconPhoto}
            name='camera' type='font-awesome'
            size={normalize(23)}
          />
        </View>
      </Card>
    </View>
  </View>
</ScrollView>

风格:

const styles = StyleSheet.create({
container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-between'
},
inputShipTitle: {
    height: verticalScale(45),
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 3,
},
icon: {
    position: 'absolute',
    left: moderateScale(5),
    bottom: moderateScale(5),
},
iconPhoto: {
    position: 'absolute',
    left: moderateScale(5),
    bottom: moderateScale(5),
},
iconPickup: {
    position: 'absolute',
    left: moderateScale(8),
    bottom: moderateScale(5),
    zIndex:1,
},
iconTruck: {
    position: 'absolute',
    left: moderateScale(5),
    bottom: moderateScale(5),
    // right: width * 0.03,
},
additionalText: {
    position: 'absolute',
    bottom: moderateScale(10),
    left: moderateScale(60,2),
    fontSize: normalize(7),
    color: 'grey',
}
});

第一张照片是IOS,第二幅是android。

IOS

Android

0 个答案:

没有答案