从右侧定位

时间:2018-09-29 22:10:59

标签: javascript css react-native

我要在React Native上构建一个应用程序,我想在其中定位正确的位置

   <View style={searchDrop}> 
             <TextInput
              style={textInput}
              placeholder="Search Coin"
              onChangeText={(text) => this.onSearch(text)} />
              <TouchableOpacity onPress={() => this.props.navigation.navigate("CurrencySelection")}>
                      <Text style={money}> <Icons name="money" size={35} color="#fbc02d" /> </Text>
              </TouchableOpacity>
            </View>

具有以下样式

textInput: { 
    width: "70%",
    height: 35,
    marginLeft: 5,
    marginRight: 5,
    borderWidth: 0,
    backgroundColor: "white",
    borderRadius: 15,
    textAlign: 'center'
  }, 

searchDrop: {
    paddingTop: 32,
    paddingBottom: 5,
    display: "flex",
    flexDirection: "row",
    height: 80,
    backgroundColor: "#3b5998",
    width: 100%
  }, 
  money: {
    position: "absolute",
    right: 0
  }

有了我的期望

<Text style={money}> <Icons name="money" size={35} color="#fbc02d" /> </Text>

位于屏幕的绝对右侧

这是现在的样子

enter image description here

1 个答案:

答案 0 :(得分:1)

只需执行此操作,它将图标向右移动。

  <View style={styles.searchDrop}>
    <TextInput
      style={styles.textInput}
      placeholder="Search Coin"
      onChangeText={text => this.onSearch(text)}
    />
    <TouchableOpacity
      style={styles.money}
      onPress={() => this.props.navigation.navigate('CurrencySelection')}>
          <Text> <Icons name="money" size={35} color="#fbc02d"/> </Text>
    </TouchableOpacity>
  </View>