reactjs - 如何在 Text 组件中居中 3 个点？...

Question

我的目标是在 React Navigation 的标题按钮的 Text 组件中居中 3 个点。

            <Pressable
              style={({pressed}) => [
                {margin: 8, padding: 8, borderRadius: 16},
                !pressed && {backgroundColor: 'grey'},
              ]}>
              <Text style={{fontWeight: 'bold'}}>...</Text>
            </Pressable>

我试过的：

1. 添加flex: 1到 Pressable 组件可以完成这项工作。

2. 但是，添加fontWeight: 'bold'和fontSize: '28'破坏视图。

3. 我尝试添加justifyContent: 'center'and alignItems: 'center'，它确实垂直对齐文本 for a-zA-Z0-9，但它不垂直对齐文本 for...

标签： reactjsreact-nativereact-navigation

Answer 1

不要使用简单的文本，而是使用矢量图标。

例子：

import { Entypo } from '@expo/vector-icons';

//....


<Pressable
              style={({pressed}) => [
                {margin: 8, padding: 8, borderRadius: 16},
                !pressed && {backgroundColor: 'grey'},
              ]}>
              <Entypo name="dots-three-horizontal" size={24} color="black" />

            </Pressable>