如何在react-native中将按钮放在文本后面,如下图所示?
uplii1fm1#
可以在Text组件中使用onPress prop,也可以使用嵌套的Text你可以试试这里:https://snack.expo.io/@vasylnahuliak/9a76b0
Text
onPress
import React, { useState } from 'react'; import { Text, View, StyleSheet } from 'react-native'; const App = () => { const handleLinkPress = () => { alert('link pressed') } return ( <View style={styles.container}> <Text> Short descriptopm for trainer: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. <Text style={styles.link} onPress={handleLinkPress}> edit </Text> </Text> </View> ); }; const styles = StyleSheet.create({ link: { color: 'blue', fontWeight: 'bold', }, }); export default App;
hpcdzsge2#
例如,你可以使用<TouchableOpacity></TouchableOpacity>,你只需要把你的<Text>-Tag Package 在里面。
<TouchableOpacity></TouchableOpacity>
<Text>-Tag
<TouchableOpacity> <Text> edit </Text> </TouchableOpacity>
TouchableOpacity具有类似于按钮的OnPress事件。https://reactnative.dev/docs/touchableopacity
fcg9iug33#
您可以尝试访问https://www.npmjs.com/package/react-native-render-html#making-your-custom-component-block-or-inline使编辑按钮成为一个href链接,你可以在onLinkPress属性上得到它的onPress
3条答案
按热度按时间uplii1fm1#
可以在
Text
组件中使用onPress
prop,也可以使用嵌套的Text
你可以试试这里:https://snack.expo.io/@vasylnahuliak/9a76b0
hpcdzsge2#
例如,你可以使用
<TouchableOpacity></TouchableOpacity>
,你只需要把你的<Text>-Tag
Package 在里面。TouchableOpacity具有类似于按钮的OnPress事件。
https://reactnative.dev/docs/touchableopacity
fcg9iug33#
您可以尝试访问https://www.npmjs.com/package/react-native-render-html#making-your-custom-component-block-or-inline
使编辑按钮成为一个href链接,你可以在onLinkPress属性上得到它的onPress