I wanna add a "Verify" button inside my TextInput as shown in the picture. I tried adding a TouchableOpacity component but I think I'm doing it wrong. You guys have a solution?
pieyvz9o1#
你能试试这个代码吗它对我有效
<View style={{flexDirection:'row'}}> <View> <TextInput style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}} value = {this.state.emailId} onChangeText = {(emailId) => {this.setState({emailId})}} placeholder = 'Enter your email id' onSubmitEditing = {()=>{this._fetchResults()}} /> </View> <TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'> <View> <Text>Verify</Text> </View> </TouchableHighlight> </View>
06odsfpq2#
试试这段代码它应该为你工作
<View style={{flexDirection:'row'}}> <View> <TextInput style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}} value = {this.state.emailId} onChangeText = {(emailId) => {this.setState({emailId})}} placeholder = 'Enter your email id' onSubmitEditing = {()=>{this._fetchResults()}} /> </View> <TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'> <View> <Text>Verify</Text> </View> </TouchableHighlight>
huwehgph3#
我不能得到造型下来的权利,但这里的这将让你在正确的方向
import * as React from 'react'; import { Text, View, StyleSheet, TextInput, TouchableOpacity, } from 'react-native'; import Constants from 'expo-constants'; export default function App() { return ( <View style={styles.container}> <View style={styles.firstBox}> <View style={styles.row}> <TextInput placeholder="Email id" placeholderTextColor="gray" style={styles.input} /> <TouchableOpacity style={styles.button}> <Text style={styles.buttonText}>Verify</Text> </TouchableOpacity> </View> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: Constants.statusBarHeight, padding: 8, backgroundColor: 'lightgreen', }, buttonText:{ textDecorationLine:"underline" }, input: { flex: 2, borderRadius:5 }, button: { flex: 0.5, alignItems: 'center', }, firstBox: { backgroundColor: 'green', paddingBottom: 2, top:-2, borderRadius:5 }, row: { flexDirection: 'row', width: '100%', backgroundColor: 'white', padding:5, borderRadius:5 }, });
3条答案
按热度按时间pieyvz9o1#
你能试试这个代码吗它对我有效
06odsfpq2#
试试这段代码它应该为你工作
huwehgph3#
我不能得到造型下来的权利,但这里的这将让你在正确的方向