(React Native) onPress не работает для компонента Text - PullRequest
0 голосов
/ 21 апреля 2020

Я пытаюсь заставить работать onPress, но "привет" не печатается. Фактически, серый фон по умолчанию, который должен отображаться за текстом при нажатии, не отображается. Если я заменю вложенный текст компонентом TouchableHighlight, он будет печататься. Однако это должен быть непрерывный поток текста, который переносится на следующую строку, поэтому TouchableHighlight не подойдет.

<Text>   
    <Text>Thanks for visiting the app! Please click </Text>
    <Text onPress={() => { console.log("hi") }}> here right now! </Text>
    <Text>to sign in</Text>
</Text>

Фактический код немного сложнее, чем выше, но в основном это несколько текстовые компоненты, вложенные в один больший текстовый компонент (таким образом, текст может переноситься на следующую строку и выглядит как один фрагмент текста). Любые идеи о том, как получить onPress для работы текстового компонента? Спасибо!

Как это должно выглядеть (жирный текст обозначает, что можно нажимать):

Пожалуйста, нажмите здесь
прямо сейчас
, чтобы войти.

Как это НЕ должно выглядеть (нельзя использовать вид как внешний держатель вместо текста):

Please click here right to sign in. 
             now

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Оказывается, мое решение было просто очистить и перестроить проект ....

0 голосов
/ 21 апреля 2020

У меня была похожая проблема, и я использовал комбинацию Text и TouchableOpacity оболочки в View с flexWrap : wrap, посмотрите demo

вот код :


const test = () => {
  return ( 
    <View style={styles.container}>
      <Text style={styles.textPart1}>
      test you text {' '}
      </Text>
      <TouchableOpacity>
        <Text style={styles.textPart2}>
       clickable text
        </Text>
        </TouchableOpacity>    
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap',
    justifyContent: 'center',
    alignContent: 'center',
    padding: 10,
  },
  textPart1: {
    fontFamily: 'Raleway-Regular',
    fontSize: 20,
    color: '#5F5F5F',
  },
  textPart2: {
    fontFamily: 'Raleway-Regular',
    fontSize: 20,
    color: '#428947',
    textDecorationLine: 'underline',
  },
});

...