Thay đổi tên ứng dụng trong React Native


84

Tôi đang cố gắng tìm cách thay đổi tên ứng dụng ReactNative. APK đã cài đặt trên thiết bị của tôi chỉ đơn giản là "Ứng dụng", với biểu tượng Android. Làm cách nào để thay đổi điều này?

Tôi đã thử thay đổi package.json và chạy lại bản nâng cấp react-native nhưng nó không cập nhật AndroidManifest.xml

Câu trả lời:


131

Trình tạo không ghi đè strings.xmltệp nằm trong đó android/app/src/main/res/values/, vì vậy bạn phải thay đổi app_namebiến theo cách thủ công


Đồng thời đảm bảo rằng getMainComponentName () trong MainActivity của bạn trả về tên ứng dụng gốc phản ứng của bạn. Tên tức là trong app.json
John Muraguri

5
còn IOS thì sao?
Abd Rmdn


Còn iOS thì sao?
Muhammad Ashfaq

4
để thay đổi tên hiển thị Ứng dụng iOS gốc phản ứng, bạn có thể thay đổi thuộc tính 'Tên hiển thị gói' từ info.plist
Hassan Raza

61

Hãy thử react-native-rename gói npm này sẽ dễ dàng hơn trong quá trình

// in project directory

   npx react-native-rename <newName>

6
Mặc dù liên kết này có thể trả lời câu hỏi, nhưng tốt hơn hết bạn nên đưa các phần thiết yếu của câu trả lời vào đây và cung cấp liên kết để tham khảo. Các câu trả lời chỉ có liên kết có thể trở nên không hợp lệ nếu trang được liên kết thay đổi. - Từ đánh giá
m_callens

1
vấn đề giải quyết
Paul Nyondo

2
@MikeS. đây không phải là một thực hành xấu vì nó KHÔNG phải là một sự phụ thuộc của dự án mà là một công cụ, và có chúng như là những phụ thuộc của dự án thực sự là một thực hành tồi. Cũng giống như Crna, bạn nên có nó như một công cụ toàn cầu
Gustavo Topete

16
CẢNH BÁO: Không sử dụng thư viện này. nó sẽ chạy dự án của bạn. Không bao giờ sử dụng cái này.
MRSafari

20
KHÔNG ĐƯỢC DÙNG. Theo văn bản này, gói này không được chấp nhận / không được duy trì và sẽ làm cho dự án của bạn không thể sử dụng được.
SQueryL

37

Đối với Android

Sửa đổi displayName trong tệp app.json

Sửa đổi app_name trong android / app / src / main / res / values ​​/ string.xml

sau đó chạy các lệnh này lần lượt

cd android
./gradlew clean
cd ..
react-native run-android

Đối với iOS

Sửa đổi Tên hiển thị trong mục tiêu Dự án (Tab Chung)

Chọn dự án ứng dụng của bạn làm Ứng dụng máy chủ trong mục tiêu Dự án để thử nghiệm (Tab Chung)nhập mô tả hình ảnh ở đây


2
Cảm ơn rất nhiều, điều này đã hiệu quả với tôi sau khi thử rất nhiều giải pháp khác
cherucole

bạn ạ, là một người cứu mạng
Jithin

28

Cách tôi đã làm điều này cho android (hacky, nhưng nó hoạt động) chỉ là thay đổi trường chuỗi app_name trong

android / app / src / main / res / giá trị / string.xml

Nó sẽ thay đổi tên của ứng dụng Android đã cài đặt của bạn thành bất kỳ tên nào bạn đặt làm giá trị.


1
Tôi đã thử phương pháp này, nhưng nó không giải quyết được vấn đề của tôi. Khi ứng dụng chạy trên điện thoại di động của tôi, nó thông báo có lỗi "Ứng dụng <pres appname> chưa được đăng ký"
NIKHIL CM

1
Đã thử phương thức @KlaasNotFound. Đã thành công mới xây dựng uprunning
Nikhil CM

Tôi gặp sự cố tương tự như @NIKHILCM với react-native 0.56
Marecky

15

Tôi thấy rằng, nếu bạn muốn thay đổi cả tên ứng dụng tên gói (tức là đổi tên toàn bộ ứng dụng), thì cần thực hiện các bước sau:

  • Đảm bảo rằng bạn không có bất kỳ thứ gì quý giá (tài nguyên không được tạo, sao chép thủ công) trong thư mục con android/ios/.

  • Xóa cả thư mục android/ios/.

  • Thay đổi "name"mục nhập của bạn package.jsonthành tên mới.

  • Thay đổi tên ứng dụng trong cả của bạn index.android.jsindex.ios.js: AppRegistry.registerComponent('NewAppName', () => App);

  • Chạy react-native upgradeđể tạo lại các thư mục con của nền tảng.

  • Nếu bạn có các tài nguyên được liên kết (như phông chữ tùy chỉnh, v.v.) chạy react-native link.

  • Nếu bạn có các tài nguyên được tạo khác (như biểu tượng ứng dụng), hãy chạy các tập lệnh để tạo chúng (ví dụ yo:).

  • Cuối cùng, gỡ cài đặt ứng dụng cũ trên mỗi thiết bị và chạy ứng dụng mới.


7
Chỉ cần một lưu ý: Tôi nghĩ rằng bước số 1 nên được create a repo test branch first.
Mike S.

1
Kể từ hôm nay, có một gói npm mới được cho là để giảm thiểu những vấn đề này , react-native-git-upgrade. Nhưng tôi không thể làm cho nó chạy bằng cách sử dụng yarn. Dự án của tôi không sử dụng npmvà tôi cũng không muốn cài đặt nó trên toàn cầu. Vì vậy, cố gắng tìm ra các lựa chọn của tôi. Cho đến nay, react-native-git-upgradethất bại từ CLI
Mike S.

1
cảm ơn bạn rất nhiều vì tôi đã làm theo một số bước và nó đã hoạt động
Greco Jonathan

1
Cũng phải thực hiện gỡ lỗi kho khóa stackoverflow.com/a/57438549/5900793
Steffo Dimfelt

1
react-native upgradekhông tạo các thư mục con của nền tảng nữa.
Dogu Deniz Ugur

11

Nếu bạn không có bất cứ điều quý giá trong thư mục android của bạn, bạn có thể xóa các thư mục sau đó chạy react-native upgradesau đó react-native android. Chúng sẽ tạo lại AndroidManifest.xml cùng với các tệp và thư mục cần thiết. (Đã thử trên 0.18 trong Windows 10)


Hoạt động trên macOS Sierra.
Prashant Ghimire

10

Nếu bạn chỉ yêu cầu Android thì đây là giải pháp

Sửa đổi displayNametrong /app.jsontệp

Sửa đổi app_nametrongandroid/app/src/main/res/values/strings.xml

sau đó chạy các lệnh này lần lượt

cd android
gradlew clean
cd ..
react-native run-android

Tại sao tôi không thể chạy phản ứng tự nhiên eject và nó nói rằng tôi namephải được xác định trong app.jsonnhưng tôi có nó?
Mr-Programs

điều này sẽ gây ra lỗi: Invariant vilation: xxxAPP chưa được đăng ký. (xxxAPP là tên ứng dụng cũ hơn)
tess hsu

10

Trước hết: Mở app.jsontệp trong thư mục dự án gốc phản ứng của bạn. Và, chỉ cần thay thế displayNamegiá trị của thuộc tính json trong tệp này. ví dụ:

{
    "name": "SomethingSomething",
    "displayName": "My New App Name"
}

Đối với ứng dụng Android: Mở strings.xmltệp, thay thế <string name="app_name">giá trị của thẻ thành tên ứng dụng mới của bạn. ví dụ:

<string name="app_name">My New App Name</string>

Đối với iOS: Mở info.plist, thay thế giá trị sau <key>CFBundleDisplayName</key>thành tên ứng dụng của bạn. ví dụ:

<key>CFBundleDisplayName</key>
<string>My New App Name</string>

Gỡ cài đặt ứng dụng trước đó đã cài đặt trên thiết bị của bạn. Sử dụng npm install trong thư mục chính của dự án, trong thư mục thư mục ios chạy lệnh pod install . Bây giờ, chỉ cần cài đặt ứng dụng trong thiết bị của bạn.


Nếu tôi muốn thay đổi Mã định danh gói?
Oliver D

@OliverD Đối với Android, thay đổi ID ứng dụng trong tệp android / app / build.gradle và đối với iOS, thay đổi Số nhận dạng gói trong dự án iOS. Đừng quên định cấu hình lại các tài khoản bên thứ ba của bạn trong trường hợp đăng nhập bằng google, đăng nhập bằng facebook, v.v.
Rahul Rastogi

7

cho android android / app / src / main / res / giá trị / string.xml Ứng dụng Android của tôi

cho ios Chỉ cần mở nó trong xCode chọn tab dự án chung chỉ cần đổi tên nó.


3

chỉ cần thay đổi <string name="app_name"> 'NEW_APP_NAME' </string> nằm ở

[project_dir] /android/app/src/main/res/values/strings.xml

LƯU Ý: khuyến nghị

react-native-rename

của Paul Nyondo có thể ảnh hưởng đến tệp MainApplication.java, ĐỪNG SỬ DỤNG NÓ!


Đồng ý, tôi đã isntall phản ứng bản địa-đổi tên và nó một vấn đề khác trong APP
tess hsu

2

Bạn có thể thử cái này

  1. Cập nhật displayName trong app.json thành tên mới
  2. Xóa thư mục ios / và android /
  3. Chạy phản ứng tự nhiên đẩy ra
  4. Chạy liên kết gốc phản ứng

2
eject dường như không hoạt động nếu trên React 0.6 trên, do đó lệnh hiển thị lỗi: error Lệnh "eject" không được công nhận.
tess hsu

2

trước khi thay đổi tên ứng dụng, hãy lấy bản sao lưu mã của bạn và sau đó, đi tới đường dẫn sau và thay thế tên ứng dụng của bạn bằng tên ứng dụng mới và thay đổi tôi một tệp nữa app.json E: *** \ android \ app \ src \ main \ res \ giá trị \ string.xml

<resources>
    <string name="app_name">New Name</string>
</resources>

app.json

{
  "name": "oldName",
  "displayName": "New Name"
}

2

Đơn giản là cách

DỰ ÁN> android> ứng dụng> chính> res> kiểu

Sau đó, thay đổi tên ứng dụng


1

trước hết hãy tạo một bản sao lưu toàn bộ của dự án bao gồm các mô-đun nút (để khôi phục các biểu tượng / phots .. vv trong tương lai)

  1. Cập nhật tên và displayName trong app.json thành tên mới
  2. đổi tên thư mục ứng dụng giống như tên ứng dụng
  3. Xóa thư mục ios / và android /
  4. xóa mô-đun ndoe
  5. cập nhật tên trong package.json (bạn phải sử dụng tên mới để nhập & yêu cầu () trong mã của mình. ví dụ: nhập {x} từ 'NewAppName / src / api')
  6. watchman watch-del-all
  7. rm -rf / tmp / haste-map-react-native-packager- *
  8. rm -rf / tmp / metro-Bundler-cache- *
  9. khởi động lại máy tính
  10. sudo npm cài đặt
  11. phản ứng tự nhiên đẩy ra
  12. khôi phục biểu tượng / hình ảnh
  13. liên kết gốc phản ứng
  14. khởi động lại máy tính
  15. thận trọng khi chạy ứng dụng : bạn có thể phải thiết lập mọi thứ theo cách thủ công. trong trường hợp của tôi là SplashScreen

rất phức tạp không đơn giản
Arif Hidayat
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.