Question

我正在尝试为带有中央徽标和左侧后退按钮的应用程序设计NavBar。我已经将徽标和按钮水平居中了。但是，当我设置一个align-items:'center'属性时，它似乎与可触摸不透明度一起中断了。有什么办法可以使我的组件垂直和水平居中？

例如| <-LOGO |

import React,{ Component } from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import { colors } from '../../utils/theme';
import { widthScale, heightScale } from '../../utils/responsive';
import   {TouchableOpacity}from 'react-native';
const logo = require('../../assets/images/logo.png');
const prev = require('../../assets/images/baseline-arrow_back-24px.png');

class  NavBar extends Component{
  constructor(props) {
    super(props);
  }
  render(){
    return(
      <View style ={styles.nav}
        <TouchableOpacity style= {styles.prev}  onPress={handleClick()}>
               <Image  source={prev} />
            </TouchableOpacity> 
          <Image style={styles.logo} source={logo} />
       <Image  source={prev} style={styles.tex} />
      </View>
    );
  }
}


export default NavBar;

const styles = StyleSheet.create({

  nav: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: colors.tertiary,
    width: widthScale('100%'),
    height: heightScale('2%'),
    paddingVertical: heightScale('4%'),
    borderBottomWidth: 2,
    borderWidth: 1,
    flexWrap : 'wrap',
    borderColor: 'green',
    flex:1
  },
  logo: {
    justifyContent: 'center',
    alignItems:'center',
    borderWidth: 1,
    borderColor: 'blue'
  },
  info: {
    justifyContent: 'center',
  },
  prev:{
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'red',
    alignItems:'center',
  },
  tex:{
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'orange',
    justifyContent: 'space-between',
    alignItems:'center',
    opacity: 0,
  }
});

1. Without Touchable Buttons align-items: center, justify-content: center 2. With Touchable Buttons just justify-content: space-between 3. With Touchable Buttons justify-content: space-between and align-items: center

Answer 1

enter code here<SafeAreaView style={styles.maincontent}>

            <View style={styles.toolbar}>
                <TouchableOpacity style={{ justifyContent: 'center', }} activeOpacity={0.4} onPress={() => Actions.pop()}>
                    <Image source={{ uri: 'ic_arrow_back_gris_24dp' }} style={styles.back_img} />
                </TouchableOpacity>
                <Image source={{uri : 'logo'}} style={styles.back_txt}
                    />
            </View>

        </SafeAreaView>

样式：

maincontent: {
    height: '100%',
    width: '100%',
    flexDirection: 'column',
    backgroundColor: '#f1f1f1',
    padding: 10
},
toolbar: {
    backgroundColor: '#FFFFFF',
    height: 50,
    width: '100%',
    flexDirection: 'row',
    borderRadius: 3,
    marginBottom: 10
},
back_img: {
    height: 24,
    width: 24,
    justifyContent: 'center',
    alignSelf: 'center',
    marginLeft: 10,
    padding: 4
},
back_txt: {
    color: '#808080',
    justifyContent: 'center',
    alignSelf: 'center',
    marginLeft: '13%',
    fontSize: 14,
    width: '65%'
},

Answer 2

似乎“可触摸不透明度”正在拉伸以填充空间。通过将“可触摸不透明度”包装在一个视图中并限制该视图的宽度，样式可以按预期工作。

<View style={styles.nav}>
        <View style={styles.toolbar}>
          <TouchableOpacity style={{ justifyContent: 'nav'}} activeOpacity={0.4} onPress={this.props.prev}>
            <Image source={prev} style={styles.back_img} />
          </TouchableOpacity>
        </View>
        <Image source={logo} style={styles.back_txt}
        />
        <Image  source={prev} style={styles.tex} />
      </View>

样式：

const styles = StyleSheet.create({
  nav: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems:'center',
    backgroundColor: colors.tertiary,
    width: widthScale('100%'),
    height: heightScale('2%'),
    paddingVertical: heightScale('4%'),
    borderBottomWidth: 2,
    flexWrap : 'wrap',
  },
  tex:{
    justifyContent: 'center',
    alignItems:'center',
    opacity: 0,
    width: widthScale('10%')
  },
  toolbar: {
    flexDirection: 'row',
    alignItems: 'center',
    width: widthScale('10%')
},
  back_img: {
    justifyContent: 'center',
    alignSelf: 'center',
    aspectRatio:1.5,
  },
  back_txt: {
    justifyContent: 'center',
    alignSelf: 'center',
},
});

可触摸的不透明度打破居中

2 个答案: