React Native如何去除忘记密码Text组件的默认左右内边距

解决方案 #

你要去除「忘记密码」文本的左右内边距，可按下面的方法修改：

问题原因 #

你现在看到的左右间距主要来自两个点：

• 包裹文本的TouchableOpacity组件在纵向布局的父容器中默认会撑满整行宽度，父容器middleView本身设置了左右25的外边距，会间接让文本两边出现留白
• Text组件的样式没有显式清除默认的左右内边距/外边距

修改方案 #

方案一：仅清除文本自身的左右内边距，保留父容器的左右留白

给forgetPass样式新增两个属性，清除默认的内外边距即可：

forgetPass: {
  textAlign: 'center',
  textDecorationLine: 'underline',
  includeFontPadding: false,
  paddingHorizontal: 0, // 清除左右内边距
  marginHorizontal: 0, // 清除左右外边距
}

方案二：让忘记密码文本完全贴合屏幕左右，取消父容器外边距的影响

给包裹文本的TouchableOpacity设置负的左右外边距，抵消父容器的左右边距：

<TouchableOpacity style={{ marginHorizontal: -25 }}>
  <Text style={styles.forgetPass}>忘记密码？</Text>
</TouchableOpacity>

方案三：让点击区域和文本宽度一致，无左右多余间距

给TouchableOpacity设置alignSelf: 'center'，让容器宽度自适应文本内容，自然不会有左右的额外留白：

<TouchableOpacity style={{ alignSelf: 'center' }}>
  <Text style={styles.forgetPass}>忘记密码？</Text>
</TouchableOpacity>

内容的提问来源于stack exchange，提问作者Satyam Tripathi