Touchable Opacity 中断居中

Question

我正在尝试为应用程序设置导航栏的样式，该应用程序的徽标位于中心，后退按钮位于左侧。我在水平居中徽标和按钮方面取得了很大进展。但是，当我设置 align-items:'center' 属性时，它似乎与 Touchable Opacity 中断了。有没有办法让我的组件垂直和水平居中？

例如。 |<- 徽标 |

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.没有可触摸按钮 align-items: center, justify-content: center 2. 使用 Touchable Buttons 只需 justify-content: space-between 3. 使用可触摸按钮 justify-content: space-between 和 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

似乎 Touchable Opacity 正在拉伸以填充 space。通过将 Touchable Opacity 包装在视图中并限制该视图的宽度，样式按预期工作。

<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',
},
});

Touchable Opacity 中断居中

Touchable Opacity breaks centering

react-native

react-native-android

touchableopacity