javascript - 如何在我自己的应用程序中复制此 Instagram 布局？

Question

我正在尝试在我自己的应用程序中使用本机反应从 instagram 复制以下布局：

这是我的代码：

render() {
      if (this.state.isLoading) {
        return (
              <View styles ={styles.container}>
                <ActivityIndicator size="large" color="#9E9E9E" />
              </View>
        );
      }
      return (
          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
              <View style={styles.container}>

                  <Image
                      source={{ uri: this.state.oldProfilePic }}
                      style={styles.thumbnail}
                    />

                  <TouchableOpacity
                      onPress={this.openImagePickerAsync}
                      style={styles.button}
                    >
                      <Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18 }}>change profile picture</Text>
                    </TouchableOpacity>

                  <View style= {{ flexDirection: 'row', justifyContent: 'space-between', padding: 20 }}>
                      <Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18, paddingTop: 5 }}>bio   </Text>

                      <TextInput
                          style={styles.inputBox}
                          value={this.state.newBio}
                          onChangeText={newBio => this.setState({ newBio })}
                          placeholder={this.state.oldBio}
                          multiline
                          autoCapitalize="none"
                          placeholderTextColor="#696969"
                        />
                    </View>


                  <View style ={{ flexDirection: 'row', justifyContent: 'space-between', padding: 20 }}>
                      <Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18, paddingTop: 7 }}>twitter   </Text>

                      <TextInput
                          style={styles.socialInputBox}
                          value={this.state.twitter}
                          onChangeText={twitter => this.setState({ twitter })}
                          placeholder={this.state.twitter === null ? 'Enter Twitter username' : this.state.twitter}
                          autoCapitalize="none"
                          placeholderTextColor="#696969"
                        />
                    </View>



                  <View style= {{ flexDirection: 'row', justifyContent: 'space-between', padding: 20 }}>
                      <Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18, paddingTop: 7 }}>instagram   </Text>

                      <TextInput
                          style={styles.socialInputBox}
                          value={this.state.instagram}
                          onChangeText={instagram => this.setState({ instagram })}
                          placeholder={this.state.instagram === null ? 'Enter Instagram username' : this.state.instagram}
                          autoCapitalize="none"
                          placeholderTextColor="#696969"
                        />
                    </View>



                  <TouchableOpacity
                      onPress={() => { this.saveChanges(); }}
                      style={styles.button}
                    >
                      <Text style={{ color: '#FFFFFF', fontWeight: 'bold', fontSize: 18 }}>save changes</Text>
                    </TouchableOpacity>


                  <KeyboardSpacer />
                </View>
            </TouchableWithoutFeedback>
      );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: '#121212',
  },
  inputBox: {
    width: '85%',
    // margin: 10,
    padding: 15,
    fontSize: 16,
    borderColor: '#d3d3d3',
    borderWidth: 1,
    color: '#FFFFFF',
    // textAlign: 'center'
  },
  thumbnail: {
    width: 150,
    height: 150,
    borderRadius: 75,
    marginTop: 40,
    marginBottom: 30,
  },
  button: {
    // marginTop: 10,
    paddingVertical: 5,
    alignItems: 'center',
    backgroundColor: 'transparent',
    borderColor: '#FFFFFF',
    borderWidth: 1,
    borderRadius: 5,
    width: 200,
    marginRight: 10,
    marginLeft: 10,
    marginBottom: 30,
  },
  socialInputBoxText: {
    fontSize: 16,
    fontWeight: 'bold',
    marginTop: 10,
    paddingTop: 15,
    color: '#FFFFFF',
  },
  socialInputBox: {
    width: '35%',
    // marginTop: 10,
    padding: 10,
    fontSize: 14,
    borderColor: '#d3d3d3',
    borderWidth: 1,
    textAlign: 'center',
    color: '#FFFFFF',
  },
});

这是我的代码的结果：

如您所见，instagram 更整洁。我想知道如何才能更接近在我自己的应用程序中复制 instagram 布局。先感谢您！

标签： javascriptreact-native