React Native 文本内嵌可点击链接对齐及响应式适配问题求助

错位问题修复 #

你当前将视图类组件TouchableOpacity直接嵌套在Text组件内，两类组件默认排版规则不一致，是出现垂直错位的核心原因。最优修复方案是直接使用Text组件自带的onPress点击属性，无需额外嵌套TouchableOpacity，同类型的Text组件天然适配内联排版，不会出现对齐问题。

响应式适配优化 #

• 替换Dimensions API为useWindowDimensions Hook：Dimensions仅能获取应用启动时的固定尺寸，无法响应屏幕旋转、窗口分屏等尺寸变更场景，useWindowDimensions会自动监听窗口尺寸变化，适配更稳定。
• 统一文本基础样式：给所有内联文本设置相同的fontSize和lineHeight，避免不同文本默认样式差异导致的排版错乱。
• 尺寸按比例适配：所有布局尺寸基于设计稿基准宽度做等比换算，保证不同分辨率设备下元素显示比例一致。

修改后完整代码 #

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  useWindowDimensions
} from 'react-native'

const VideoPlayback = () => {
    const { width: windowWidth, height: windowHeight } = useWindowDimensions()
    return (
      <View style={styles.container}>
        <View style={[styles.advertContainer, {
          width: windowWidth,
          height: windowHeight / 8.78,
          marginTop: windowHeight / 20,
        }]}>
          <View style={[styles.adverPicture, {
            width: windowWidth / 3.02,
            height: windowHeight / 11.25,
            marginLeft: windowWidth / 45
          }]}></View>
          <View style={[styles.textContainer, {
            width: windowWidth / 1.69,
            marginLeft: windowWidth / 30,
          }]}>
            <Text style={styles.normalText}>
              Everyone is watching this so they can learn math.
              <Text 
                style={styles.advertLinkText}
                onPress={() => console.log('open advert')}
              > 
                It is your turn 
              </Text>
            </Text>
          </View>
        </View>
      </View>
    )
}

export default VideoPlayback

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFFFFF",
  },
  advertContainer: {
    backgroundColor: "#F5F5F5",
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: '#E9E9E9',
    alignItems: 'center',
    flexDirection: 'row'
  },
  adverPicture: {
    backgroundColor: 'black',
  },
  textContainer: {},
  normalText: {
    fontSize: 14,
    lineHeight: 20,
    color: '#000'
  },
  advertLinkText: {
    color: "#957DAD",
    // 显式设置和普通文本一致的字体、行高属性，保证排版统一
    fontSize: 14,
    lineHeight: 20,
  }
})

如果需要添加点击反馈效果，可以在Text组件上绑定onPressIn和onPressOut事件，动态修改文本颜色即可。

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