Question

我正在尝试在Avatar上放置一个TextInput元素，使其看起来像传统的搜索栏，但不会覆盖TextInput上，请不要它可以正常工作，还是可以建议将搜索图标放在TextInput上方的另一种更好的方法，谢谢

 import { Avatar } from 'react-native-elements';
import FontAwesome
from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
import MaterialIcons
from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';


export default class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {timePassed: false};
}
   state = {
    fontLoaded: false
    };
   async componentWillMount() {
    try {
        await Font.loadAsync({
            FontAwesome,
            MaterialIcons
        });
        this.setState({ fontLoaded: true });
    } catch (error) {
        console.log('error loading icon fonts', error);
    }
 }

 render() {
    setTimeout(() => {
        this.setState({timePassed: true})
    }, 4000);
    if (!this.state.timePassed) {
        return <Splash/>;
    } else {
        return (
            <View style={BackStyles.container}>
                <Avatar style={BackStyles.searchIcon} icon={{ name: 'search', size: 25, }}/>
                <TextInput placeholder="Search for your herbs.."
                underlineColorAndroid={'transparent'}  style={BackStyles.textBox}
            /></View>
        );
    }
}
}

const BackStyles = StyleSheet.create({
container: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    alignSelf: 'stretch',
    flex: 1,
    backgroundColor: '#E2E2E2',
    marginTop: 20,
  //  width: '100%'
},
textBox: {
    flex: 1,
    height: 45,
    padding: 4,
  //  textAlignVertical: 'top',
    paddingLeft: 20,
   // marginRight: 5,
    flexGrow: 1,
  //  fontSize: 18,
    color: '#000',
    backgroundColor: '#fff',
   // textAlign: 'center'
},
searchIcon:{
    position: 'absolute',
    alignSelf: 'stretch',
    height: 45,
    flex: 1,
    top: 50,
    flexGrow: 1,
    padding: 4
}
});

Answer 1

您可以使用Flexbox的justifyContent功能将TextInput置于左侧，将搜索图标置于右侧。如果在容器上而不是在TextInput上加边框，则TextInput右侧将固定有一个搜索图标，而实际上它们是两个单独的组成部分，则整个内容将显示

// styles
const styles = StyleSheet.create({
  searchBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'black',
  },
});

// the component
<View style={styles.searchBox}>
  <TextInput ...yourprops />
  <Avatar ...yourprops />
</View>

如果您想了解有关justifyContent以及Flexbox有多敬虔的更多信息，请查看Chris Coyier的Flexbox guide。

将元素放在文本框上

1 个答案: